How can we improve the Microsoft Edge developer experience?

CSS line clamping

64 votes
Vote
Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
You have left! (?) (thinking…)
Love shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

4 comments

Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
Submitting...
  • p01 commented  ·   ·  Flag as inappropriate

    While -webkit-line-clamp is there and used already, I'd rather see CSS overflow 4 implemented [1]. The -webkit-line-clamp- has severe limitations ( it's tricky to apply on a container with multiple children and different styles ) and performance impact ( directly correlated to the length of the textNodes thus you might need to trim them anyways to prevent janky scroll and reflows ).

    Last line ellipsis is interesting but doesn't allow to specify the number of lines.

    [1] https://drafts.csswg.org/css-overflow-4/#max-lines

  • Robert Colburn commented  ·   ·  Flag as inappropriate

    @David Storey,
    I'm all for a better solution, and Presto's dated but elegant solution is fine as well. It would be great to see one of the browsers get behind an multi-line ellipses, and push a spec to the relevant committees. That said, let's try to avoid bike-shedding and get a solution out there. Currently, WebKit's undocumented solution is the only CSS solution out there, and it's in the wild and production-ready.

  • David Storey [MSFT] commented  ·   ·  Flag as inappropriate

    Note that this is non-standard (there is no spec) and only works with the really old flex box syntax in WebKit/Blink, not the standard syntax. It also has a number of issues, including not falling back in an elegant way.

    Opera supported text-overflow: -o-ellipsis-lastline in Presto, which I personally think was a better solution, but that wasn't accepted for standardisation at the time. The following polyfill includes some information on the pros/cons https://github.com/Merri/ellipsis-lastline

Feedback and Knowledge Base