Струбцина - CSS-хитрости | CSS Альманах 2025

line-clampУсекает свойство текста в определенном количестве линий.

Спецификация для него в настоящее время является черновиком редактора, так что это означает, что здесь ничего не высечено в камне, потому что работа над ним продолжается. Тем не менее, это определено как сокращение от max-linesи block-overflow, первое из которых отмечено как рискующее быть исключенным в Рекомендации кандидата.

Легко увидеть, как max-linesможно было бы исключить, поскольку его функция (установка количества строк перед усечением) уже запекается, line-clampи любая дальнейшая абстракция может быть ненужной. Но это сбивает нас с пути, так что давайте продолжим.

Синтаксис

.module ( line-clamp: (none | ); )

line-clamp принимает следующие значения в текущем проекте спецификации:

none: не устанавливает максимальное количество строк, и в результате не происходит усечения.
: устанавливает максимальное количество строк перед обрезкой содержимого, а затем отображает многоточие (…) в конце последней строки.

Это многоточие должно отображаться как символ Юникода (U + 2026), но может быть заменено эквивалентом на основе языка содержимого и режима записи используемого User-Agent.

Эй, а нельзя ли это сделать с переполнением текста?

Справедливый вопрос, мой друг, и ответ: ну ...

(Видите, что я там делал?)

… Вроде как.

text-overflowдействительно имеет ellipsisзначение, которое будет обрезать текст:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

См. Переполнение текста ручкой Джеффа Грэма (@geoffgraham) на CodePen.

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

Вот где line-clampвступает в игру. Просто обратите внимание, что для этого используется комбинация трех свойств:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

См. Зажим линии Pen (-webkit) Джеффа Грэма (@geoffgraham) на CodePen.

Firefox поддерживает это сейчас, именно так (с -webkit-префиксами и всем остальным).

Итак, в чем подвох?

На данный момент это поддержка браузера. Строчные зажимы являются частью модуля переполнения CSS уровня 3, который в настоящее время находится в черновике редактора и в настоящее время полностью не поддерживается.

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

При желании мы могли бы пойти по пути JavaScript. Clamp.js сделает свое дело:

См. Статью Джеффа Грэма (@geoffgraham) на CodePen.

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

Это поддержка фирменной и недокументированной реализации ограничения линии WebKit.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.