block-overflowСвойство обрезает текст и показывает больше содержания следует, вставив многоточие или пользовательскую строку после нескольких строк, задается max-linesсвойством.
Это свойство было введено в проект редактора спецификации CSS Overflow Module Level 3. Это означает, что на данный момент он является экспериментальным и считается незавершенным. Фактически, вы можете следить за разговором, который включает в себя болтовню о переименовании собственности в целом.
Синтаксис
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow принимает следующие значения:
clip: Не вставляет символ, указывающий на следующий текст. Вместо этого содержимое просто усекается и обрезается по последнему символу.ellipsis: Отображает многоточие (…) в конце последней строки. Он должен отображаться как символ Unicode (U + 2026), но может быть заменен эквивалентом в зависимости от языка содержимого и режима записи используемого User-Agent.: Отображает произвольный текст (например, «Читать дальше →») в конце последней строки. В спецификации сказано, что 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 14 * | 68 * | Нет | 17 | 5 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5,0–5,1 * |