Sometimes, we want to add CSS ellipsis on second line.
In this article, we’ll look at how to add CSS ellipsis on second line.
How to add CSS ellipsis on second line?
To add CSS ellipsis on second line, we use the line-clamp property.
For instance, we write
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
to make the content truncate to 3 lines with -webkit-line-clamp: 3;.
And we use overflow: hidden; to hide overflow text.
We use text-overflow: ellipsis; to add ellipsis after the truncated text.
Conclusion
To add CSS ellipsis on second line, we use the line-clamp property.
