Clamping lines without '-webkit-line-clamp'

Question

In the good old days, there existed a trick in webkit for clamping lines using pure css:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:          


        

Answer 1

Try using this CSS

.line-clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 20px 1px 45px;
position: absolute;
right: 0;}

.line-clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}

Answer 2

The only cross-browser solution is to use js afaik. Several solutions to the problem of multi-line truncation with ellipsis are discussed here: http://css-tricks.com/line-clampin/

I hate them all, but welcome to web development.

Answer 3

The CSS Overflow Level 3 specification defines a standard line-clamp property (without the quirks the ´-webkit-` prefixed solution has). Unfortunately, non of the main browsers supports this feature yet.

So, for now you will have to use a polyfill for browsers that don't support this property. CSS-Tricks describes three solutions, each one having its pros and cons.

1. Using standard CSS

   .fade {
     position: relative;
     height: 3.6em; /* exactly three lines */
   }
   
   .fade::after {
     content: "";
     text-align: right;
     position: absolute;
     bottom: 0;
     right: 0;
     width: 70%;
     height: 1.2em;
     background:
       linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
   }
   

   Pros: All current browsers support this. Cons: There's a fade-out instead of an ellipsis and requires heights to be set manually.

2. Using Opera's -o-ellipsis-lastline value

   .last-line {
     height: 3.6em; /* exactly three lines */
     text-overflow: -o-ellipsis-lastline;
   }
   

   Pros: Display as expected. Cons: Only works in old versions of Opera and requires height to be set manually

3. Using JavaScript (Clamp.js)

   var module = document.getElementById("clamp-this-module");
   $clamp(module, {clamp: 3});
   

   Pros: Display as expected and is flexible through different options. Cons: Requires a JS library to work and is less performant than CSS solutions.

Answer 4

It's worth noting that as of late 2019 the original premise of this question – i.e. that the -webkit-line-clamp is obsolete – may no longer be true.

According to Elad's article, both Edge and Firefox have introduced support for the rather useful -webkit syntax, making it the closest thing we'll have to a standard. To me, the chances of Microsoft and Firefox ever being pragmatic enough to support the webkit prefix seems remote. However, now that they have, I'd expect it to remain for the foreseeable future.

I haven't tested it extensively on Edge yet, but it's rock-solid on Safari, Chrome and Firefox – though you should avoid padding-bottom.