Trimming Multi-Line Text in CSS

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.

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

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

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:

  1. Define the number of lines of text to be displayed. Do so by using the
    -webkit-line-clamp: 3; property.
  2. Add the old flex-direction property from the old flexbox,
    -webkit-box-orient: vertical;.
  3. Define the element with the overflow: hidden; property.
.content p{   
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Line-clamp result

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.

@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;
}
}
.foo{ 
@include trim; /*will use the ellipsis = else result*/
}
.bar{
@include trim(3); /*will use the line-clamp = if result*/
}

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 :-)

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store