block-overflowВластивість обрізає текст і показує більше змісту випливає, вставивши крапки чи призначену для користувача рядок після кількох рядків, задається max-linesвластивістю.
Властивість була представлена в редакторському проекті специфікації модуля переповнення CSS рівня 3. Це означає, що на даний момент він експериментальний і вважається незавершеним. Насправді ви можете слідкувати за розмовою, яка включає балаканину про перейменування власності взагалі.
Синтаксис
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow приймає такі значення:
clip: Не вставляє символ, щоб вказати більше тексту, який слід дотримуватися. Натомість вміст просто скорочується та обрізається на останньому символі.ellipsis: Відображає крапку (...) у кінці останнього рядка. Він повинен відображатися як символ Unicode (U + 2026), але може бути замінений еквівалентом на основі мови вмісту та режиму запису використовуваного Агента Користувача.: Відображає власний текст (наприклад, “Читати далі →”) в кінці останнього рядка. У специфікації сказано, що User-Agent може замінити рядок еліпсисом, якщо рядок "абсурдно" довгий.
Знову ж таки, все це експериментальна, незавершена робота. Ці значення можуть змінюватися. Або можна додати більше. Наприклад, були заклики до «розумнішого» еліпсису, який міг би зробити більше, наприклад, обрізати текст посередині:
One thing led to another and… yada yada yada, that was that.Використовуйте line-clampкоротко
Ми можемо отримати приблизно те саме, використовуючи line-clampскорочення для властивостей block-overflowі max-lines.
Як це визначено в даний час, однак, line-clampприймає тільки одне числове значення max-linesі неявно встановлює block-overflowна ellipsisзначення. Отже, якщо ви хочете використовувати користувальницький рядок для усічення, то вам слід замість цього використати довгу форму.
Підтримка браузера
На даний момент жодного, але ви можете отримати певну підтримку, використовуючи власну реалізацію WebKit line-clamp:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 14 * | 68 * | Ні | 17 | 5 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |