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.
