Свойство line-clamp

Описание

Ограничивает текст заданным числом строк. При превышении текста указанным числом строк, он обрезается и в конце добавляется многоточие.

Синтаксис

line-clamp: none | число;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .text {
 background: #0285b532;
 padding: 15px;
 }
 .text p {
 -webkit-line-clamp: 2;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 }
 </style>
 <div class='text'>
 <p>
 Далеко-далеко, за словесными горами в стране гласных и согласных живут рыбные тексты. Заглавных рекламных вдали дорогу знаках они меня lorem власти родного рыбными океана, одна ты большой решила, от всех жизни предупреждал оксмокс языкового собрал раз журчит свое, но проектах запятой
? Рукописи жизни безопасную ведущими диких которое толку рыбными текст ее его буквенных. 
 </p>
 </div>
</body>
</html>

Далеко-далеко, за словесными горами в стране гласных и согласных живут рыбные тексты. Заглавных рекламных вдали дорогу знаках они меня lorem власти родного рыбными океана, одна ты большой решила, от всех жизни предупреждал оксмокс языкового собрал раз журчит свое, но проектах запятой ? Рукописи жизни безопасную ведущими диких которое толку рыбными текст ее его буквенных.

Свойство line-clamp

Описание

Синтаксис

Пример

Читайте также

Задает определенные настроки для разных языков

Свойство border-bottom-color

Свойство text-emphasis-color

Селекторы атрибутов

Свойство border-bottom-right-radius

Значение	Описание
none	Содержимое никак не ограничивается.
число	Содержимое ограничивается указанным числом строк.