-webkit-line-clamp

Ограниченная доступность

Эта функция не относится к Baseline, поскольку она не работает во всех широко используемых браузерах.

Свойство -webkit-line-clamp CSS позволяет ограничить содержимое блока заданным количеством строк.

Она работает только в сочетании со свойством display, установленным в значение -webkit-box или -webkit-inline-box, и свойством -webkit-box-orient, установленным в значение vertical. Несмотря на то, что они устарели, взаимозависимость этих трех свойств является полностью определённым поведением и продолжит поддерживаться.

В большинстве случаев также необходимо установить свойство overflow в значение hidden, иначе содержимое не будет обрезано, но после указанного числа строк всё равно будет показан многоточие.

При применении к элементам-якорям обрезка может происходить посередине текста, а не обязательно в конце.

Примечание: Это свойство изначально было реализовано в WebKit и имеет некоторые проблемы, такие как зависимость от двух других устаревших свойств. Оно было стандартизировано в Модуле CSS Overflow Level 4 для обеспечения обратной совместимости. Модуль CSS Overflow Level 4 также определяет свойство line-clamp, которое призвано заменить это свойство и избежать его проблем. Однако все браузеры, поддерживающие line-clamp , также будут поддерживать -webkit-line-clamp по соображениям совместимости.

Синтаксис

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

Значения

none: Это значение указывает, что содержимое не будет обрезано.
<integer>: Это значение указывает количество строк после которого содержимое будет обрезано. Оно должно быть больше 0.

Формальное определение

Начальное значение	`none`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

-webkit-line-clamp = 
  none             |
  <integer [1,∞]>

Примеры

Обрезка абзаца

HTML

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Результат

Спецификации

Спецификация
CSS Overflow Module Level 4 # propdef-line-clamp

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`-webkit-line-clamp`	6	17	68	15	18.25	18	68	14	18.24.2	1.0	4.4
`none`	Нет	Нет	68	Нет	18.2	Нет	68	Нет	18.2	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp