Для создания многострочного обрезания текста с помощью CSS можно использовать следующие свойства: 1
- display: -webkit-box. 12 Задаёт тип отображения элемента как блочно-строчный флекс-контейнер, который поддерживает свойство -webkit-line-clamp. 1
- -webkit-box-orient: vertical. 1 Определяет ориентацию флекс-контейнера как вертикальную, то есть флекс-элементы будут располагаться в столбец. 1
- -webkit-line-clamp: указывает максимальное количество строк, которые могут отображаться в флекс-контейнере. 1 Например, значение 3 означает, что текст будет обрезан после третьей строки. 1
- overflow: hidden. 1 Скрывает часть содержимого элемента, которая не помещается в заданную область. 1 Это необходимо для того, чтобы многоточие появлялось в конце обрезанного текста. 1
Свойство -webkit-line-clamp срабатывает наиболее корректно в браузерах на основе webkit. 3