How to add cross-browser multi-line text overflow with ellipsis appended within a fixed width and height with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *