CSS-свойство -webkit-line-clamp

Свойство CSS -webkit-line-clamp позволяет ограничить содержимое блока указанным количеством строк.

Плюсы: четкое ограничение пространства под текст, надежность (даже при изменении количества текста отображаться будет установленное количество строк), небольшое количество кода для реализации задачи.

Он работает только в сочетании со свойством display, установленным на-webkit-box или-webkit-inline-box, и свойством-webkit-box-orient, установленным на vertical.

Также overflow: hidden будет уместно использовать для сокрытия избыточного текста.

https://codepen.io/martinwolf/pen/nmeQYK https://codepen.io/chriscoyier/pen/AMJwvg

Похожее действие выполняет text-overflow: ellipsis но он установлю многоточие в конце только первой линии текста, вместо этого line-clamp можно указать желаемое количество строк для отображения.

https://css-tricks.com/almanac/properties/l/line-clamp/ https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp