В работе с веб-страницами часто возникает ситуация, когда необходимо обрезать текст и добавить многоточие в конце. Примером может быть блок текста с переменной высотой, где число строк будет меняться в зависимости от размера окна браузера.
<div style="width:100%; height:20%; background:red; position:absolute;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Если необходимо добавить многоточие к многострочному тексту, то можно использовать функцию -webkit-line-clamp в CSS.
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
В этом примере значение -webkit-line-clamp равно 3, что означает, что будет показано только три строки текста, а остальной текст будет скрыт и в конце последней строки будет добавлено многоточие. Значение этого свойства можно изменять в зависимости от требований. Свойство -webkit-box-orient: vertical; обеспечивает вертикальное выравнивание текста.
Тем не менее, стоит отметить, что свойство -webkit-line-clamp не поддерживается во всех браузерах, поэтому его использование может вызвать проблемы с отображением на некоторых устройствах или в некоторых версиях браузеров.
В случае, если необходимо обеспечить более универсальную поддержку браузеров, можно использовать JavaScript или jQuery для добавления многоточия к многострочному тексту.
Добавить комментарий