I want multi-line truncation via CSS

[aarongustafson]

Single-line text truncation is easy, straightforward, and broadly supported in browsers; however, multi-line text truncation requires JavaScript, half-baked and non-standardized CSS properties, or fragile hacks to accomplish.

The closest attempt I've seen is the -webkit-line-clamp approach:

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

---

https://webwewant.fyi/wants/5e59460efa695ea9f7750152/

[marcoscaceres]

Given that it's in the CSS draft, I'm presuming that it has some degree of support beyond WebKit (i.e., it may already be happening) .

https://drafts.csswg.org/css-overflow-3/#propdef-line-clamp

The old syntax is supported in Gecko, and there is a bug filed to support the new syntax:
https://bugzilla.mozilla.org/show_bug.cgi?id=1540681

cc @svoisen on the Gecko side, as he might have more insight on any prioritization.

[svoisen]

Yes, we've spoken about it at previous CSSWG meetings, and the work to get -webkit-line-clamp in the spec as legacy compatibility came out of that. @heycam has more context on those discussions than I do. We are aware of it and do want to support it, but haven't prioritized it over other work at the moment.