Home » Tutorials » HTML & CSS » Truncate Multiple Line With CSS

Truncate Multiple Line With 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.

What is -webkit-line-clamp?

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.

Demo

WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as all iOS web browsers. WebKit is also used by the BlackBerry Browser, PlayStation consoles beginning from the PS3, the Tizen mobile operating systems, and a browser included with the Amazon Kindle e-book reader.

Show me the code!

<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!

Most Popular

Latest