Добавление многоточия к многострочному тексту

В работе с веб-страницами часто возникает ситуация, когда необходимо обрезать текст и добавить многоточие в конце. Примером может быть блок текста с переменной высотой, где число строк будет меняться в зависимости от размера окна браузера.

<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 для добавления многоточия к многострочному тексту.