W3docs
ru
Войти

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

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

Свойство line-clamp обрезает блок текста до заданного количества строк, добавляя многоточие (…) в точке обрыва. Это стандартный способ создания многострочных превью с кнопкой «Читать далее» — например, ограничение описания карточки тремя строками независимо от длины исходного текста.

На этой странице рассматриваются синтаксис, рабочий пример, вспомогательные свойства, от которых зависит line-clamp, поддержка браузерами и префикс -webkit-, а также ограничения свойства.

Зачем использовать line-clamp

До появления line-clamp обрезка текста до одной строки требовала комбинации overflow: hidden, white-space: nowrap и text-overflow: ellipsis. Этот приём работает только для одной строки — white-space: nowrap удерживает всё содержимое в одной строке. line-clamp решает задачу для нескольких строк: когда нужно показать, например, ровно три перенесённые строки с последующим многоточием.

Синтаксис

line-clamp: none | <integer>;

Используйте none, чтобы отключить обрезку, или положительное целое число в качестве максимального количества отображаемых строк.

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

В приведённом ниже примере абзац ограничен тремя строками. Обратите внимание на три сопутствующих свойства — display: -webkit-box, -webkit-box-orient: vertical и overflow: hidden — без которых обрезка не сработает (см. раздел Вспомогательные свойства ниже).

<!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;
        -webkit-line-clamp: 3;
        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>
Попробуйте сами »

Результат

![Свойство CSS line-clamp](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)

В приведённом примере текст обрезается на третьей строке. Поскольку -webkit-line-clamp — это форма, которую браузеры фактически реализуют, объявляются оба варианта — -webkit-line-clamp: 3 и стандартный line-clamp: 3 — чтобы правило работало повсеместно сегодня и оставалось валидным по мере распространения поддержки свойства без префикса.

Вспомогательные свойства

line-clamp не работает самостоятельно. Элемент должен формировать flex-контейнер и скрывать переполнение:

СвойствоЗачем нужно
display: -webkit-boxПереключает элемент в устаревший режим flexbox-разметки, для которого определено line-clamp.
-webkit-box-orient: verticalРасполагает строки блока вертикально, чтобы их можно было подсчитать и обрезать.
overflow: hiddenСкрывает строки, превышающие лимит; без него текст переполняет контейнер и многоточие не появляется.

Значения

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

Ограничения свойства CSS line-clamp

Свойство удобно, но имеет ряд ограничений, о которых стоит знать:

  1. Оно зависит от префикса -webkit-. Во всех браузерах реально работает -webkit-line-clamp. Вариант без префикса line-clamp входит в CSS Overflow Module Level 4 и постепенно внедряется, однако для совместимости по-прежнему следует объявлять версию с префиксом.
  2. Нельзя настроить многоточие. Символ обрезки фиксирован и может плохо сочетаться с некоторыми языками или способами отрисовки шрифтов.
  3. Для работы требуется несколько вспомогательных свойств — применить его к обычному блочному элементу не получится:
.element {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

Если необходимо проверить поддержку перед применением, можно обернуть правила в запрос характеристик:

@supports (-webkit-line-clamp: 2) {
  .element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
Начальное значениеnone
Применяется к-
НаследуетсяДа.
АнимируемоНет.
ВерсияCSS Overflow Module Level 4
DOM Синтаксисobject.style.lineClamp = "2";
Внимание

Note: display: -webkit-box is a legacy, non-standard flexbox implementation used by older WebKit browsers. It is retained here solely as a fallback for compatibility.

Связанные темы

  • CSS text-overflow — обрезка одной строки с многоточием.
  • CSS overflow — управление отображением или скрытием переполняющего содержимого.
  • CSS white-space — управление переносом строк, дополнение к обрезке одной строки.
  • CSS overflow-wrap — перенос длинных слов, чтобы они не выходили за пределы контейнера.

Практика

Практика
Какова функция line-clamp в CSS?
Какова функция line-clamp в CSS?
Was this page helpful?