How to add CSS ellipsis on second line?

Spread the love

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.

Leave a Reply

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