Truncate Text to an amount of lines using line-clamp
In a previous post (Truncate your Text with CSS) we truncated some text into a smaller single line element, which can be good for single line items, but what if you had a paragraph or a box of text that you wanted to also be truncated automatically with css.
demo box with line clamp 3
How can we truncate the text?
To truncate the text to a certain amount of lines, we can use the css property line-clamp
.
line-clamp support
We can check over here on can i use, if line-clamp is supported by the most used browsers. It seems that is is supported by most of the browsers now, but it has to be prefixed with -webkit
like this -webkit-line-clamp
.
here is a can i use on the css clamp, you might need to check the latest support here.
line clamp other requirements
Other requirements for this to work is to have the display set to -webkit-box, so on the element you also need to add: display: -webkit-box
Setting up the classes
Setup some classes for 3 and 4 line clamp. demo-box and line-clamp-3, 4. You can see these in action below.
Allowing the full text to still be read
If we still want the text to be read even when its truncated, you can add a title tag on the element and then it will appear as a tooltop if you mouse over the element.
adding a title tag
example showing how the title tooltip text will appear
Element Padding
I originally had some padding on the element as i usually do to make it look less cramped, but this does not work well with the line clamping, as you can see the hidden lines.
So rather than using padding on the element i added a border, which still allows the element to be padded and also hides the text underneath the border.
Truncate Text to an amount of lines using line-clamp Demo
View Demo Full Screen View Demo New Tab
Truncate Text to an amount of lines using line-clamp Code
HTML
<!-- HTML -->
<h3>Line Clamp 3</h3>
<div class='demo-box line-clamp-3'>
This is some demo line clamp text. This text should be clamped to three lines unless there is not enough text to be clamped.
</div>
<h3>Line Clamp 4</h3>
<div class='demo-box line-clamp-4'>
This is some demo line clamp text. This text should be clamped to four lines unless there is not enough text to be clamped. Also this box needs to have overflow hidden on it and the webkit box orient set to vertical.
</div>
<h3>Allowing the full text to still be read</h3>
<div class='demo-box line-clamp-4' title='This is some demo line clamp text. This text should be clamped to four lines unless there is not enough text to be clamped. Also this box needs to have overflow hidden on it and the webkit box orient set to vertical.'>
This is some demo line clamp text. This text should be clamped to four lines unless there is not enough text to be clamped. Also this box needs to have overflow hidden on it and the webkit box orient set to vertical.
</div>
CSS
/* CSS */
.demo-box {
max-width:220px;
padding:0px;
background:#CCC;
color:#444;
border-radius:10px;
margin:10px;
overflow: hidden;
border:10px solid #CCC;
box-shadow:0px 2px 10px #000;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.line-clamp-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}