CODEWITHSUNDEEP
css
alias51
alias51

Reputation: 8608

How to use text-overflow:ellipsis for 3 line truncate?

How can I use ellipsis in CSS to truncate after 3 lines of text, rather than 1?

I have this so far, but it only works for text on a single line. I want the text to wrap twice (for a quote).

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Upvotes: 6

Views: 9454

Answers (1)

2ne
2ne

Reputation: 5986

This cannot be done in all css3 browsers yet, only webkit.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

I use clamp.js if I really need to truncate

Upvotes: 6

Related Questions