Truncate text if it's too long but allow it to have two rows

Question

What I want to do is if the text doesn't fit in two rows, truncate the rest of the text.

Right now this sample, you see Lorem Ipsum is simply du... but what it needs to look like is

Lorem Ipsum is simply dummy 
text of the printing and...

Display the text in two rows but the rest of the text will be truncated.

How can I do that in css?

body{
  font-family:sans-serif;
}

p{
  background-color:yellow;
  font-size:1.5rem;
  width:300px;
  
  /**Major Properties**/
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

index.html
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

score 1 · Accepted Answer · answered Apr 30 '23 at 15:50

1

I think the line-clamp attribute is what you need: Examples

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

answered Apr 30 '23 at 15:50

Fuad

350
10

Truncate text if it's too long but allow it to have two rows

1 Answers1