Sometimes, we want to add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS.
In this article, we’ll look at how to add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS.
How to add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS?
To add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS, we use line clamp.
For instance, we write
<div>
This is a multi-lines text block, some lines inside the div, while some
outside
</div>
to add a div.
Then we write
div {
width: 205px;
height: 40px;
background-color: gainsboro;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
to add -webkit-line-clamp: 2; to truncate the text to 2 lines in the div.
We hide overflowing content with overflow: hidden;.
And we set the width and height so clamping can be applied.
Conclusion
To add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS, we use line clamp.
