How can we improve the Microsoft Edge developer experience?

CSS line clamping

61 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Love shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    4 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      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