Свойство 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>Читайте также
Свойство box-decoration-break
Указывает, как оформлять фрагменты текста при его переносе на другую строку. Работает только для свойств: background, border, border-image, box-shadow...
Селектор по тегу
В качестве селектора может выступать любой элемент HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и др....
Свойство mix-blend-mode
Указывает режим наложения исходного цвета на фоновый цвет или фоновое изображение.
Safari и iOS Safari не поддерживают значения hue, saturation...
Свойство visibility
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которо...