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.
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 compatability. This is mostly due to the fact that Firefox doesn’t support line-clamps yet. In my research I came across several different workarounds, but I’ll be sharing the one that worked best for me. In this example we will properly set up the 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:
$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.
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
4. Make sure you go back and include your 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
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
: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.