.ellipsis

Это вспомогательный блок которые обрезает текст по поличству строк. На страницу выводится какое-то полноценное и при это большое полотно текста, чтобы там для СЕО все четенько было, а визуально обрезается, например, тремя строками:




Nunc efficitur sit amet odio convallis porta. Ut ac magna tortor. Integer luctus ultrices lacus quis vestibulum. Donec cursus fringilla purus, vel volutpat mi semper at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vehicula porttitor nisi, vitae rutrum felis sodales ut. Vivamus odio mi, auctor a cursus ut, cursus sit amet lacus. Vestibulum venenatis est eget imperdiet lobortis. Vestibulum a mauris magna. Vivamus ultrices eros vel lectus consequat finibus. Vestibulum pharetra vehicula leo, vestibulum scelerisque ex sollicitudin quis. Aliquam placerat turpis vel neque ultricies dapibus ac ac felis. Vivamus sit amet consectetur tellus. Sed nec commodo lectus. Integer nec pulvinar erat. Proin ultrices lectus orci, sit amet tristique risus sollicitudin sit amet. Donec eget congue odio. Donec vitae accumsan ex. Morbi odio turpis, volutpat et lectus ac, iaculis ultricies nibh. Donec elementum, ipsum tempor pulvinar venenatis, felis enim egestas libero, in mollis lectus ante nec sapien. Phasellus dictum dapibus sapien at aliquam. Vestibulum id quam a mi vulputate dictum non ut dui. Sed a nunc est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non magna quis mauris maximus dapibus. Praesent bibendum purus dui, vitae gravida ex sollicitudin ac. Pellentesque vestibulum enim at orci rhoncus, vel ultrices mauris faucibus.



Блок не универсальный и под каждый случай надо задавать параметры отдельно. Выше был дефолтный кейс.

Параметра два: высота строки в тексте (line-height) и количество строк которые надо обрезать. В зависимости от значение задается высота элемента .ellipsis__inner::before (смотри _ellipsis.css)



Более живой пример смотри в проекте main, например.