W3docs
ru
Войти

Свойство CSS max-lines

Используйте свойство CSS max-lines, чтобы задать максимальное число строк для контента. Примеры и практика.

Свойство CSS max-lines ограничивает количество видимых строк в блочном контейнере. Когда содержимое выходит за этот предел, лишние строки скрываются, а дальнейшее поведение определяется обработкой переполнения контейнера. На практике max-lines используется вместе с block-overflow: clamp, чтобы текст обрезался чисто по границе строки, а не посередине символа.

Когда это применяется?

Классический сценарий использования — многострочный анонс «читать далее»: карточка, новостной фрагмент или описание товара, которые никогда не должны быть выше, например, трёх строк, независимо от длины исходного текста. Без ограничения по числу строк длинный абзац будет сдвигать всё содержимое вниз и ломать сетку. max-lines ограничивает высоту в строках, а не фиксированным значением height в пикселях, поэтому блок остаётся одинаковым даже при изменении размера шрифта или межстрочного интервала.

max-lines — это подробное основное свойство. Два связанных свойства дополняют ту же возможность:

  • block-overflow — управляет тем, как отображается обрезанный край (например, clamp добавляет многоточие в точке обрезки).
  • line-clamp — сокращённая форма, устанавливающая max-lines и block-overflow одним объявлением.
Внимание

max-lines является частью всё ещё развивающегося CSS Overflow Module Level 4 и не реализовано ни одним крупным браузером на момент написания. Для продакшн-разработки сегодня используйте широко поддерживаемое свойство -webkit-line-clamp (показано в примере ниже). Всегда проверяйте актуальную поддержку перед выпуском — см. справочник MDN по line-clamp.

Как работает обрезка сегодня (-webkit-line-clamp)

Поскольку max-lines ещё нельзя использовать, практическим эквивалентом служит небольшой, хорошо известный набор свойств:

.teaser {
  display: -webkit-box;        /* required for the clamp to apply   */
  -webkit-box-orient: vertical;/* stack the lines vertically        */
  -webkit-line-clamp: 3;       /* keep only the first 3 lines       */
  overflow: hidden;            /* hide everything past the clamp     */
}

Это даёт тот же визуальный результат, который должен обеспечивать max-lines: 3: не более трёх строк с многоточием (…) в точке обрезки текста. Пример ниже использует как экспериментальный синтаксис max-lines, так и запасной вариант -webkit-line-clamp, чтобы обеспечить корректную деградацию.

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

Синтаксис

max-lines: none | <integer> | initial | inherit;

Пример свойства max-lines

Абзац ниже ограничен тремя строками. Объявления max-lines и block-overflow нацелены на браузеры, которые в будущем реализуют спецификацию; объявления -webkit-box, -webkit-box-orient и -webkit-line-clamp обеспечивают тот же эффект в браузерах, доступных сегодня.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        overflow: hidden;
        /* Experimental, spec-based syntax */
        max-lines: 3;
        block-overflow: clamp;
        /* Widely supported fallback */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    </style>
  </head>
  <body>
    <h2>Max-lines property example</h2>
    <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
noneМаксимальное число строк не задано.
<integer>Задаёт количество строк перед обрезкой содержимого. Отрицательные значения недопустимы.
initialУстанавливает свойство в значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Типичные ошибки

  • Это ещё не реальный вариант. Ни один крупный браузер не поддерживает max-lines, поэтому использование только этого свойства оставит содержимое без обрезки. Всегда включайте запасной вариант -webkit-line-clamp.
  • Для обрезки нужен overflow: hidden. Независимо от того, используете ли вы max-lines или подход с -webkit-box, лишние строки скрываются только при обрезке переполнения — без него текст всё равно выходит за пределы.
  • -webkit-line-clamp требует блочного отображения. Оно работает только для элемента с display: -webkit-box и -webkit-box-orient: vertical. Отсутствие любого из этих свойств — наиболее частая причина того, что обрезка «не работает».
  • Считаются строки, а не символы. Более широкий блок или меньший шрифт вмещает больше текста в строку, поэтому одно и то же значение max-lines показывает разное количество слов. Используйте его для ограничения высоты в строках, а не точной длины текста.

Связанные свойства

  • block-overflow — определяет, как отображается обрезанный край.
  • line-clamp — сокращённая форма для max-lines и block-overflow.
  • text-overflow — добавляет многоточие к единственной переполненной строке.
  • overflow — управляет тем, что происходит с содержимым, выходящим за пределы блока.

Практика

Практика
Какова функция свойства 'max-lines' в CSS?
Какова функция свойства 'max-lines' в CSS?
Was this page helpful?