How to add text-overflow ellipsis on two lines with CSS?

Spread the love

Sometimes, we want to add text-overflow ellipsis on two lines with CSS.

In this article, we’ll look at how to add text-overflow ellipsis on two lines with CSS.

How to add text-overflow ellipsis on two lines with CSS?

To add text-overflow ellipsis on two lines with CSS, to set the line clamp property.

For instance, we write

div {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

to add -webkit-line-clamp: 3; to make the max number of lines 3 lines.

Then we use overflow: hidden; to hide the overflowing text.

And we use text-overflow: ellipsis; to add ellipsis after the end of the truncated text.

Conclusion

To add text-overflow ellipsis on two lines with CSS, to set the line clamp property.

Leave a Reply

Your email address will not be published.