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

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

Свойство max-lines создает эффект скрепления при помощи свойства block-overflow.

Вспомним, что line-clamp является сокращенной формой записи для свойств max-lines и block-overflow.

Данное свойство находится в стадии разработки.
Отрицательные значения недопустимы.
Значение по умолчанию none
Применяется К блокам с фрагментами.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.maxLines = "2";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      p {
      overflow: hidden;
      box-sizing: content-box;
      width: 300px;
      font-size:16px;
      line-height:24px;
      font-family: Helvetica, sans-serif;
      max-lines: 3;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства max-lines</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
  </body>
</html>

Значения

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

Поддержка браузера

chrome edge firefox safari opera
Считаете ли это полезным?