DEV Community

Discussion on: Say Goodbye to Pesky Overflowing Text With the text-overflow CSS Property

View post
Collapse
 
bjw1234 profile image
ZuoZuomu •

How can I do if we have multi line text ? :)

Collapse
 
vtrpldn profile image
Vitor Paladini •

Great question!

The example implementation works like this for multi-line:

multi line example

Is that what you had in mind?

Collapse
 
louislow profile image
Louis Low • • Edited

The sorcery method is

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
janpauldahlke profile image
jan paul • • Edited

i do lots of web, but i still hate css. because it often feels like

this

this it magic? webkit crossbrowser? i learned smthng here. -webkit-line-clamp: 3;

Thread Thread
 
vtrpldn profile image
Vitor Paladini • • Edited

The -webkit part is a prefix that states that this property probably only works with WebKit based browsers.

Some properties are unique to Chrome/Safari so you may need to write browser-specific CSS from time to time.

🚨🚨🚨

But those in the example above are deprecated/non-standard properties and should not be used.

🚨🚨🚨

Thread Thread
 
louislow profile image
Louis Low • • Edited

Yea, very crossing browser. If you hate CSS that much, I still can recommend you another way by using the Yogurt CSS framework.

<!-- Example -->
<y class="clamp-3">
  ...
</y>
Enter fullscreen mode Exit fullscreen mode

Still hate it, try making your own styling dev tool.