- Tutorials / HTML & CSS
- Tuesday, 3rd Nov, 2020
Home » Tutorials » HTML & CSS » Truncate Multiple Line With CSS
Truncating a single line is very easy with CSS, but if you want to truncate multiple-line is a bit harder in the old days, until -webkit-line-clamp being introduced by Webkit.
The -webkit-line-clamp CSS property allows us to limit the contents to the specified number of lines with ellipsis (3 dots).
To use -webkit-line-clamp, you must set the display property to either -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.
In most cases you will also want to set overflow to hidden, otherwise the contents won’t be clipped but an ellipsis will still be shown after the specified number of lines.
<style> .truncate { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } </style>
The -webkit-line-clamp: <integer> allows you to specify the number of lines after which the content will be clamped. It must be greater than 0. If the value is none, the content wonʼt be clamped.
According to Caniuse statistic, the browser support has gotten pretty good. You may use it for your web project without much worries!