CSS свойство line-clamp, или -webkit-line-clamp

Свойство line-clamp, или  его префиксная версия -webkit-line-clamp позволяет указать, сколько строк текста должно отображаться.

Синтаксис line-clamp

То есть указать нужно число строк, которое будет отображаться, без каких-либо единиц изменений. Всё, что выходит за границы указанного количества строк, обрезается и, соответственно, на странице не отображается.

Использование line-camp в коде

Выглядит просто, однако это не совсем так. Для корректной работы этого свойства должно соблюдаться несколько условий:

• нужно задать блоку свойство display: -webkit-box ;
• указать ориентацию строк с помощью -webkit-box-orient: vertical;
• использовать  для скрытия лишнего текстаoverflow: hidden.

Код в этом случае будет такой:

Пример вживую:

See the Pen Line-clamp + link read more by HTML-plus (@ambassador) on CodePen.

Как можно увидеть из примера, текст и вправду обрезается тремя линиями + добавляется троеточие, которое как бы говорит, что это не весь текст и  продолжение следует.

Попробуйте закомментировать любое из приведенных выше свойств - и увидите, что текст развернется. Кроме того, вы можете изменять ширину блока, потянув за правый нижний угол, чтобы увидеть, что 3 строки текста все равно остаются, меняется только количество текста в них.

Можно еще несколько улучшить внешний вид примера, добавив градиентную маску и разместив ссылку на ней поверх текста, используя абсолютное позиционирование.

See the Pen Line-clamp read more cta by HTML-plus (@ambassador) on CodePen.

В примере ниже можно поиграться с настройками и посмотреть, как все работает.

See the Pen Fade last chars in multiline truncated text by Yair Even Or (@vsync) on CodePen.

Поддержка браузерами

В сети можно встретить информацию о том, свойство line-clamp поддерживается во всех современных браузерах, включая Chrome, Firefox, Edge и Safari. Однако при проверке поддержки на Can I Use вы увидите маленькие желтые прямоугольники, которые говорят о том, что в реальности пока требуется использовать префиксную запись свойства в виде  -webkit-line-clamp.

Практические примеры использования свойства line-camp

Изменяем ссылку Read More на See Less

Это можно сделать как минимум двумя способами:

1. Используя JavaScript-код, в котором при клике на кнопку-ссылку мы добавляем или убираем класс с прописанными там свойствами:

See the Pen Line-clamp + link read more by HTML-plus (@ambassador) on CodePen.

2. С помощью чекбокса и label, используя только CSS-селекторы

See the Pen "Read More" on pure CSS by Igor Stupka (@i-stupka) on CodePen.

Второй пример с тем же подходом:

See the Pen Pure CSS Line Clamp Toggle by HTML-plus (@ambassador) on CodePen.

И последний, третий пример:

See the Pen A Pure CSS Read More Component by Yassine Doghri (@yassinedoghri) on CodePen.

Контент в 3 столбца

Здесь свойство line-clamp используется как для заголовков, так и для текста.

See the Pen Content with the same height (line-clamp) by HTML-plus (@ambassador) on CodePen.

Обрезка длинного текста с помощью line-clamp и демонстрация подсказок

Пример основан на использовании всплывающих подсказок с помощью плагинов PopperJS  и Tippy.js. Автор Aris Acoba.

Мы видим только одну строку текста изначально и больше при наведении на сам текст в виде подсказки.

See the Pen Cutting long pills or texts with line-clamp by HTML-plus (@ambassador) on CodePen.

Поддержка rtl

На данный момент свойство -webkit-line-clamp поддерживает также арабский язык с направлением письма справа налево, что задается обычно свойством direction: rtl.

See the Pen -webkit-line-clamp Does Not Work with Right to Left (RTL) by HTML-plus (@ambassador) on CodePen.

Класс JavaScript, управляющий вариативностью количества отображаемых линий текста

Автор примера Derek Morash

See the Pen Line clamp toggle animation webcomponent by Derek Morash (@derekmorash) on CodePen.

Заключение