p { text-overflow: ellipsis; border: solid 1px #ccc; box-shadow: 1px 1px 4px rgba(0,0,0,.1) inset; line-height: 1.5em; margin: 1em; overflow: hidden; padding: 4px; width: 200px; } .nowrap { white-space: nowrap; } .with-height-limit { height: 3em; } h1 { font-weight: bold; } h1::after { content: ":" }
<h1>Overflowing of text</h1> <p class="nowrap">Hey guys, let's sing a song like <a href="http://en.wikipedia.org/wiki/Supercalifragilisticexpialidocious" title="Supercalifragilisticexpialidocious - Wikipedia, the free encyclopedia">Supercalifragilisticexpialidocious</a> now!</p> <h1>Overflowing of word</h1> <p>Hey guys, let's sing a song like <a href="http://en.wikipedia.org/wiki/Supercalifragilisticexpialidocious" title="Supercalifragilisticexpialidocious - Wikipedia, the free encyclopedia">Supercalifragilisticexpialidocious</a> now!</p> <h1>Vertical overflowing of text (without ellipsis!)</h1> <p class="with-height-limit">Hey guys, let's sing a song like <a href="http://en.wikipedia.org/wiki/Supercalifragilisticexpialidocious" title="Supercalifragilisticexpialidocious - Wikipedia, the free encyclopedia">Supercalifragilisticexpialidocious</a> now!</p>