Tuesday, February 11, 2020

css - ellipsis after multiple lines vs after one line

CSS Quickie - So, there's the old trick of adding ellipsis like

text-overflow: ellipsis;     
overflow: hidden;     
white-space: nowrap;

which works pretty well for multiple line
not quite ready for primetime, "line clamping"
is more a less  a thing now:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Browser support is still meh though.

One note, empirically it seems line-clamping tends to break on whitespace, while the old ellipsis will chop up parts of words.

Heh, I remember doing something like this in jQuery, I made a little open source jquery thing called TrunKit... it had automagic "show the full thing on hover" which was kind of fun...

No comments:

Post a Comment