Свойство CSS line-clamp

Свойство line-clamp обрезает текст до указанного количества строк. Оно ограничивает текст заданным количеством строк, добавляя многоточие после последнего видимого слова или его части.

Синтаксис

Синтаксис свойства CSS line-clamp

css

line-clamp: none | <integer>;

Пример свойства line-clamp:

Пример свойства CSS line-clamp

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        align-items: center;
        background: radial-gradient( farthest-side at bottom left, #eee, #ccc), 
        radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        line-height: 1.5;
      }
      .element {
        background-color: #fff;
        box-shadow: 1px 1px 10px #666;
        padding: 2em;
        width: 200px;
      }
      .element p {
        display: -webkit-box;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>CSS line-clamp  property example</h2>
    <div class="element">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS line-clamp Property

В приведённом примере текст обрезается на третьей строке.

Значения

Значение	Описание
none	Нет ограничения по количеству строк, обрезка не применяется.
`<integer>`	Устанавливает максимальное количество строк перед обрезкой содержимого, после чего отображается многоточие.

Недостатки свойства CSS line-clamp

Свойство CSS line-clamp имеет некоторые ограничения:

Свойство line-clamp теперь широко поддерживается во всех современных браузерах. Для старых браузеров, не поддерживающих его, можно использовать запрос возможностей для условного применения: @supports (line-clamp: 2) { ... }.
Не позволяет настраивать многоточие. Это может вызывать проблемы, так как стандартное многоточие может плохо сочетаться с разными языками или рендерингом шрифтов.
Для корректной работы свойство требует нескольких дополнительных свойств:

Свойство CSS line-clamp

css

.element {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

Начальное значение	none
Применяется к	-
Наследуется	Да.
Анимация	Нет.
Версия	CSS Overflow Module Level 4
DOM синтаксис	object.style.lineClamp = "2";

WARNING

Примечание: display: -webkit-box — это устаревшая нестандартная реализация flexbox, используемая старыми браузерами WebKit. Она оставлена здесь исключительно в качестве резервного варианта для совместимости.

Практика

Какова функция line-clamp в CSS?

Используется для применения стилей к строке.Используется для ограничения количества строк в блоке текста.Используется для выравнивания текста вдоль строки.Создаёт визуальный эффект «зажима» содержимого элемента путём ограничения отображаемых строк текста.

Свойство CSS line-clamp ​

Синтаксис ​

Пример свойства line-clamp: ​

Результат ​

Значения ​

Недостатки свойства CSS line-clamp ​