Свойство line-clamp

Описание

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

Синтаксис

line-clamp: none | число;
Значение Описание
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 власти родного рыбными океана, одна ты большой решила, от всех жизни предупреждал оксмокс языкового собрал раз журчит свое, но проектах запятой ? Рукописи жизни безопасную ведущими диких которое толку рыбными текст ее его буквенных.

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