The best one I've seen which is CSS only and responsive comes from Mobify Developer Blog - CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS:
JS Fiddle Example
CSS:
html, body, p { margin: 0; padding: 0; font-family: sans-serif;}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA; }
.ellipsis:before {
content:"";
float: left;
width: 5px; height: 200px; }
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px; }
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background: -webkit-gradient[linear, left top, right top,
from[rgba[255, 255, 255, 0]], to[white], color-stop[50%, white]];
background: -moz-linear-gradient[to right, rgba[255, 255, 255, 0], white 50%, white];
background: -o-linear-gradient[to right, rgba[255, 255, 255, 0], white 50%, white];
background: -ms-linear-gradient[to right, rgba[255, 255, 255, 0], white 50%, white];
background: linear-gradient[to right, rgba[255, 255, 255, 0], white 50%, white]; }
Html:
Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can.
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
h2{
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.
You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel
How do I make multiple text lines in CSS?
How do you put two lines of text in HTML?
tag. The
tag does not have an end tag. You can also add additional lines between paragraphs by using the
tags.