How to wrap a text within only two lines inside div with CSS?

Spread the love

Sometimes, we want to wrap a text within only two lines inside div with CSS.

In this article, we’ll look at how to wrap a text within only two lines inside div with CSS.

How to wrap a text within only two lines inside div with CSS?

To wrap a text within only two lines inside div with CSS, we use the line-clamp property.

For instance, we write

.giveMeEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

to add -webkit-line-clamp: 2; to wrap the text within 2 lines.

We hide overflowing content with overflow: hidden;.

And we add an ellipsis after the truncated content with text-overflow: ellipsis;.

Conclusion

To wrap a text within only two lines inside div with CSS, we use the line-clamp property.

Leave a Reply

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