CSS: line-clamp

Свойство line-clamp обрезает текст до определенного количества строк.

Спецификация для него в настоящее время находится в статусе Working Draft (WD) — рабочий черновик, так что это означает, что все еще здесь ничего не высечено на камне, потому что работа над ней до конца еще не завершена. Тем не менее, он определяется как сокращение для max-lines и block-overflow, первое из которых отмечено как находящееся под угрозой удаления в текущем рекомендации-кандидате (Candidate Recommendation).

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

Syntax

.module {
  line-clamp: [none | <integer>];
}

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

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

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

Эй, я могу сделать это с помощью text-overflow?

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

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

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */  overflow: hidden;
  white-space: nowrap;
}

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

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

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

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

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

На данный момент это поддержка браузера. Line clamps являются частью CSS Overflow Module Level 3 , который в настоящее время находится в статусе Working Draft (WD) — рабочий черновик и в настоящее время может полностью не поддерживается в некоторых браузерах.

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

Так же для этих целей можно пойти по пути JavaScript. Clamp.js старая но вполне рабочая библиотека:

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

Это поддержка WebKit свойства и недокументированной реализации Line Clamp в WebKit.

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

Desktop

Chrome	Firefox	IE	Edge	Safari
14*	68*	No	17	5*

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
108*	107*	2.3*	5.0-5.1*

Дополнительные ресурсы

• CSS Overflow Module Level 3 – Спецификация
• Safari CSS Reference – Документация для неподдерживаемой реализации WebKit
• Line Clampin’ (Truncating Multiple Line Text) – Крис Койер
• Clamp.js – метод JavaScript для кросс-браузерной поддержки
• Pitfalls of Card UIs – Дэйв Руперт об опасностях усечения текста

Перевод статьи: line-clamp