CSS: text-overflow

by ginpei

HTML

<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>

CSS

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: ":"
}