Trimming Multi-Line Text in CSS

5 min readDec 16, 2019

Trimming lines of text in CSS has always been an issue in web development. Up until a few years ago, trimming lines could only be done by server-side languages or with JavaScript because CSS didn’t have a text trimming feature.

One-Line Trimming

In 2007 the first support for trimming with CSS came to Internet Explorer 7 (in that period IE was the major browser), with the text-overflow: ellipsis; property. This property enabled the trimming of one line of text, making it a small improvement in the matter of trimming text on the web.

CodePen Trimming One Line with CSS

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Multi-Line Trimming with the First Version of the Flexbox Module

In 2012, with the first implementation of CSS Flexbox in Chrome, came the first support of multi-line trimming of text. It looked promising, and we web developers thought that this was the beginning of the end of needing server-side or JavaScript manipulations for trimming multi-line paragraphs.

.line-clamp {   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

But the joy was short lived. The CSS Flexbox module was updated twice more, after which there weren’t any traces left of the multi-line feature that was introduced with the first implementation of CSS Flexbox.

For many developers - like me - who were using this feature, which was supported only by an old unofficial CSS Module, these updates felt like they were the death of the multi-line trimming feature.

A history of CSS flexbox versions:

display: box; /* old syntax from 2009 */
display: flexbox; /* unofficial syntax from 2011 */
display: flex; /* official 2013 syntax*/

Line-Clamp Comes Back From the Dead

In July 2015, the Edge browser decided to support the line-clamp feature using the -webkit prefix, as was the syntax in the old CSS Flexbox module. It was very unusual that a Microsoft browser was using the the -webkit prefix, which is normally used only for Webkit browsers such as Chrome/Safari and Opera.

In July 2019, it happened again! This time it was the Firefox browser who decided to support this feature. Here too, in the same unusual manner of
IE, Firefox used the old Flexbox module and the -webkit prefix.

These two main browsers, with two different browser engines — Mozilla's Moz & Microsoft’s Edge, decided to use an old feature from an Webkit browser.

Desperate times call for desperate means, and since using the–webkit prefix was the closest to the official way to support this feature — they made this dramatic decision.

The Unofficial Line-Clamp Becomes Official

The fact that such primary browsers as Firefox & Edge started supporting the unofficial line-clamp feature, meant that this feature was here to stay.

How Line-Clamp Works

Using line-clamp is very simple:

Define the old CSS Flexbox property display: -webkit-box; on a text container.
Define the number of lines of text to be displayed. Do so by using the
-webkit-line-clamp: 3; property.
Add the old flex-direction property from the old flexbox,
-webkit-box-orient: vertical;.
Define the element with the overflow: hidden; property.

.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

CodePen Live Example of Line-Clamp

Combining the Old and New Methods Using a Sass Mixin

Now we have two ways of trimming text via CSS: the Ellipsis method for only one-line of text, and the line-clamp property for multi-line text trimming.

I prefer the old way — using the ellipsis — whenever possible, because it’s closest to the official way in CSS.

In light of that, I created a @mixin which targets both one-line trimming and multi-line trimming by accepting an optional parameter of an integer.

If the mixin gets passed a number, it will use the multi-line clamp method. If it doesn’t receive any parameter, it will use the one-line trim with the ellipsis method. It’s an overloading function.

@mixin trim($numLines: null){
   @if $numLines != null {
      display:-webkit-box;
      -webkit-line-clamp:$numLines;
      -webkit-box-orient:vertical; 
      overflow:hidden;
   }
   @else{
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow:hidden;
      display:block;
   }
}

We can use this mixin, in two different ways:

.foo{ 
    @include trim; /*will use the ellipsis = else result*/
}.bar{
    @include trim(3); /*will use the line-clamp = if result*/
}

CodePen Full Sass Mixin Example

An Example Result for the .foo & .bar classes:

Browser Support for Line-Clamp

Browser support is very wide, reaching almost 95% of the browsers in the world. If line-clamp doesn’t work in the browser, it just won’t trim the text. This fallback is good enough for non-supporting browsers.

Final Words

That’s all.
I hope you’ve enjoyed this article, and that now you better understand the methods of trimming text using CSS.
If you enjoyed this post, I would appreciate applause and sharing :-)

You can follow me via Twitter and LinkedIn.

More of my CSS posts:
Complete Guide to Responsive Images!
The New Responsive Design Evolution

Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com.