Свойство CSS max-lines
Свойство CSS max-lines ограничивает количество видимых строк в блочном контейнере. Когда контент превышает этот лимит, он обрезается в соответствии с обработкой переполнения контейнера. Это поведение работает в связке с block-overflow: clamp; для аккуратного скрытия избыточного контента.
Свойство max-lines может создавать эффект ограничения в сочетании со свойством block-overflow.
INFO
Это свойство находится в стадии разработки.
Напомним, что свойство line-clamp является сокращением для свойств max-lines и block-overflow.
WARNING
Свойство max-lines пока не поддерживается всеми браузерами. Для более широкой совместимости вы можете использовать свойство -webkit-line-clamp в качестве запасного варианта.
INFO
Поддержка браузерами ограничена. Проверьте MDN для получения актуальной информации о совместимости.
| Начальное значение | none |
|---|---|
| Применяется к | Фрагментным блокам. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS Overflow Module Level 4 |
| Синтаксис DOM | object.style.maxLines = "2"; |
Синтаксис
Синтаксис свойства CSS max-lines
max-lines: none | <integer> | initial | inherit;Пример свойства max-lines:
Пример использования свойства CSS max-lines
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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;
block-overflow: clamp;
-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' в CSS?