Лінія-затискач - CSS-хитрощі

line-clampУсікає властивість тексту в певній кількості ліній.

Специфікація для нього в даний час є редакторським проектом, тому це означає, що тут нічого не встановлено, оскільки це незавершена робота. Тим не менш, це визначається як скорочення для max-linesі block-overflow, перше з яких зазначено як ризик відмови у Рекомендації щодо кандидатів.

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

Синтаксис

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

line-clamp приймає наступні значення в поточному проекті специфікації:

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

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

Гей, я не можу зробити це із переповненням тексту?

Справедливе запитання, друже, а відповідь - ну ...

(Подивіться, що я там зробив?)

... сорта.

text-overflowдійсно має ellipsisзначення, яке скорочуватиме текст:

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

Див. Переповнення тексту Pen від Geoff Graham (@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 зробить трюк:

Дивіться затискач для лінії Pen (clamp.js) Джеффа Грема (@geoffgraham) на CodePen.

Підтримка браузера

Це підтримка належної роботи WebKit та незафіксованого впровадження затискача лінії.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.