line-clamp

line-clamp

От автора: свойство line clamp усекает текст до определенного количества строк. Спецификация для него в настоящее время находится в Editor’s Draft, что значит, что ничего еще не закреплено — она в работе. Тем не менее, оно определено как сокращение для свойств max-lines и block-overflow, первое из которых помечено, как такое, которое в скором времени может быть удалено.

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

Синтаксис

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

none: не устанавливает максимальное количество строк, и в результате усечение не происходит.

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

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

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

Справедливый вопрос, мой друг, и ответ, ну… (Видите, что я ниже сделал?) … типа того.

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Нормально, это хорошее начало. Но что, если мы хотим ввести многоточие не в первой строке, а где-то, скажем, в третьей? Вот тут и вступает в игру 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree