CSS: line-clamp

A very useful CSS trick to truncate long text to the number of lines specified. Using this CSS tricks do help in performance as JavaScript is generally heavy and expensive in resource.

CSS


_10
.long-text {
_10
width: 300px;
_10
display: -webkit-box;
_10
-webkit-line-clamp: 3;
_10
overflow: hidden;
_10
}

HTML


_10
<p class="long-text">
_10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto
_10
asperiores distinctio dolore, dolores eaque error esse eum hic id inventore
_10
magni maxime minus modi molestiae quasi quod tempora voluptates?
_10
</p>

Result

And the result? Just a simple 3 lines of text ending with an ellipsis.


_10
Lorem ipsum dolor sit amet,
_10
<br />
_10
consectetur adipisicing elit.
_10
<br />
_10
Autem consectetur esse in quos reprehenderit voluptas...