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.
