Multi-line Ellipsis Using Pure CSS As a Workaround

At the end of our weekly company meetings, two people face off in a coding challenge. Two weeks ago the engineers were given a challenge to write a method that cut off a block of text leaving an excerpt trailed by an ellipsis. As soon as the engineers were given the challenge question, I began to scribble down the front-end version.

Even though text-overflow: ellipsis; is widely supported across browsers, the feature only works for single lines of text. That is, you can’t wrap a line of text and still truncate with an ellipsis. Enter line-clamps. Line-clamps allow you to set a number of lines to display and anything greater than that will be clipped and truncated.

One of the difficulties of a multi-line ellipsis is cross browser compatibility. This is mostly due to the fact that Firefox doesn’t support line-clamps yet. In my research I came across several different workarounds for the multi-line ellipsis, but I’ll be sharing the one that worked best for me. In this example we will properly set up the multi-line ellipsis for Chrome and Safari and then we will tackle Firefox. Here are the steps I took:

1. Create Mixin with Default Arguments

The first thing you’re going to want to do is create a mixin with three important default arguments: $font-size, $line-height and $lines-to-show. You’ll need these arguments to calculate the fallback for max-height. Also, setting these default arguments will make reusing the mixin easier, especially if you’re reusing it throughout the site where those values need to change to pull off your multi-line ellipsis.

2. Set Up Basic Styles

Here you’ll be setting the height of the container and declaring that any text exceeding that height should be hidden. The height of the container will be set by using the arguments from the previous step to define font-size, line-height, and -webkit-line-clamp. Remember: -webkit-line-clamp tells the browser how many lines of text to show (i.e. the height of the text container). Using overflow: hidden; will hide all text exceeding the height of the container. Finally, you’ll want to set text-overflow: ellipsis; to apply “…” at the end of the line.

3. Set Up -webkit Styles

In the last step we already defined the -webkit-line-clamp to use the argument $lines-to-show. Next, you need to set the display to -webkit-box. The last -webkit style you need to apply is -webkit-box-orient: vertical.

4. Make Sure to go Back and Include Fall-Back Styles

Because the -webkit features are only supported in Chrome and Safari, we’ll need to set some fallbacks for the other browsers. First we need to set the fallback display: block; for the browsers that don’t support -webkit-box. Second, we need to set a fallback that will calculate the max-height of the container the text is in. To do this, we will use the three arguments we defined in our mixin and multiply them max-height: $font-size*$line-height*$lines-to-show;.

Voila! You now have an excerpt that cuts off at nth lines working perfectly in Chrome and Safari. Because I included a fallback for the height, the block of text is cut off in the right place in Firefox. However, the truncated text doesn’t end with an ellipsis. The workaround that I used to solve this problem uses pseudo classes to hide and display an ellipsis when there is overflowing text.

5. Target Only Firefox (Inside the Mixin) and Style

Use absolute positioning on both the :before and :after pseudo elements. The :before includes the ellipsis unicode (content: ‘\2026’;) and was positioned to be displayed only when the text would overflow its container. The :after includes empty content and hides the ellipsis if the text is less than or equal to the maximum amount of lines in your multi-line ellipsis.

Here’s the full code:

See the Pen Multi-line Ellipsis by Blaze Barsamian (@blazebarsamian) on CodePen.