От автора: свойство line clamp усекает текст до определенного количества строк. Спецификация для него в настоящее время находится в Editor’s Draft, что значит, что ничего еще не закреплено — она в работе. Тем не менее, оно определено как сокращение для свойств max-lines и block-overflow, первое из которых помечено, как такое, которое в скором времени может быть удалено.
Видеонаблюдение в Краснодаре можно заказать на сайте https://mkd-krasnodar.ru/.
Легко представить, как max-lines будет работать, поскольку его функция (установка количества строк перед усечением) уже готова, и здесь не нужны дополнительные догадки. Но все же давайте идти по порядку.
Синтаксис
.module { line-clamp: [none | <integer>];
}
В текущем варианте спецификации line-clamp принимает следующие значения:
none: не устанавливает максимальное количество строк, и в результате усечение не происходит.
integer: устанавливает максимальное количество строк перед усечением контента, а затем отображает многоточие (…) в конце последней строки.
Это многоточие должно отображаться как символ Unicode (U + 2026), но может быть заменено эквивалентом на основе языка контента и режима записи используемого агентом пользователя.
Эй, а не могу я сделать это с помощью text-overflow?
Справедливый вопрос, мой друг, и ответ, ну… (Видите, что я ниже сделал?) … типа того.
text-overflow действительно имеет значение ellipsis, которое будет обрезать текст:
.truncate { text-overflow: ellipsis; /* Необходимо, чтобы это заработало */ overflow: hidden; white-space: nowrap;
}
Нормально, это хорошее начало. Но что, если мы хотим ввести многоточие не в первой строке, а где-то, скажем, в третьей? Вот тут и вступает в игру line-clamp.
Итак, а в чем загвоздка?
На данный момент это поддержка браузерами. line-clamp являются частью CSS Overflow Module Level 3, который в настоящее время находится в Editor’s Draft и пока полностью не поддерживается.
Мы можем получить некоторые операции line-clamp с помощью префикса -webkit. Фактически, именно так было сделано в демо-версии. Firefox — это единственный браузер в котором это будет работать полностью, поэтому даже это не даст вам полной поддержки.
Мы могли бы пойти по пути JavaScript, если захотим. Clamp.js делает следующее:
Поддержка браузерами
Это поддержка свойства WebKit и недокументированной реализации line-clamp. Данные поддержки браузерами принадлежат Caniuse, где вы сможете найти более подробную информацию. Число указывает, что браузер поддерживает эту функцию с этой версии и выше.
Автор: Geoff Graham
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
