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: vertical;

Though this syntax happily coexists with the display: -webkit-flex syntax, in all modern webkit-based browsers, it is considered obsolete.

My question is:

How can I achieve line clamping in pure CSS and without the obsolete '-webkit-line-clamp' trick?

Answer 1

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 2

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 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.