How to line-clamp (line wrap/ellipsis for multiple lines)

[christian_ramos]

I’m trying to use the overflow ellipsis tool on some text. However, I want the text to extend on to two lines before truncating. The issue is that I need to turn off the Line Wrap toggle to use the Overflow feature, which then means the text won’t wrap on to a separate line when reaching the width bounds of my horizontal stack it’s contained in. How do I go about solving this issue?

[jason]

Hi @christian_ramos, I made a demo video to show you how to achieve this: line-clamp example

The feature is called “line-clamp” (MDN docs).

Here are the styles you need to paste in:

{
  "display": "-webkit-box",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3",
  "overflow": "hidden"
}