How to (kinda) "mimic" -webkit-line-clamp in other browsers

Huh? -webkit-line-clamp? What’s that?

-webkit-line-clamp is an unsupported WebKit property that limits the number of lines of text displayed in a block element. In order to achieve the effect, it needs to be combo-ed with a couple of other exotic WebKit properties.

– David DeSandro

"line-clamp" (for short) does some serious magic, but its syntax is not plain vanilla. I’ll let you judge for yourself:

.giveMeEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

What can we do across browsers?

One thing that should work across the board is generating content to show ellipsis in the bottom right corner of the box. The "trimming" part is done by setting the height of the box in relation to the line-height value.

Examples

Showing 3 lines:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    p {
        position:relative;
        line-height:1.4em;
        height:4.2em;      /* 3 times the line-height to show 3 lines */
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/line-clamp/ellipsis_bg.png) repeat-y;
    }

We add the ellipsis via the CSS content property, but because it could overlap some text in the bottom right corner of the paragraph, we style the background of the generated box with a linear gradient to prevent it from cutting off a letter.

Note that this approach works even if there is a font-size increase/decrease in that box, like the paragraph below shows with a font-size set to 2em:

Showing 4 lines:

    p {
        position:relative;
        line-height:1.4em;
        height:5.6em;      /* 4 times the line-height to show 4 lines */
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/line-clamp/ellipsis_bg.png) repeat-y;
    }

Showing 4 lines instead of 3 is just a matter of increasing the height of the box by 1.4em (the value of our line-height).

Things to take into consideration

You cannot generate content in IE 6 and 7 via the content property and for IE 8 you need to rely on the single colon syntax (i.e. :after instead of ::after). But you can make this work in IE 6 and 7 using a CSS expression, that will plug that content for you, see "Styling Elements With Glyphs, Sprites and Pseudo-Elements".

Depending on how your users access the "truncated" content, you may prefer the use of a DOM element in lieu of a pseudo-element – to make the ellipsis (or whatever you want to show there) actionable.

Which way to go?

You could decide to not provide ellipsis in oldIE and use this trick for all other browsers. Or you could choose to use a CSS gradient to save a HTTP request and go with a data url for IE 8/9 and Opera mini. You could also decide to do some feature detection and go with -webkit-line-clamp for UAs that support it; it’s up to you…

Isn’t our job easy? 🙂

Update: @hzr reminded me that Opera has -o-ellipsis-lastline which is much simpler to implement than -webkit-line-clamp.