Свойство 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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✕ | ✕ | ✕ | ✕ | ✕ |
Практикуйте свои знания
Что такое свойство max-lines в CSS?
Правильный!
Неправильно!