Свойство 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>Читайте также
Свойство content
Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.
Применяется совместно с псевдоэле...
Свойство border-style
Устанавливает стиль границы элемента....
Стиль первой строки форматированного текста
Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шр...
Свойство grid-auto-columns
Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows/...