CSS Умная обрезка текста — по ширине и строкам, text-overflow и line-clamp
Как легко обрезать многострочный текст с помощью CSS
В этой статье я расскажу, как с помощью нескольких свойств CSS можно легко добиться эффекта обрезки многострочного текста и показать многоточие в конце обрезанного текста. Также дам дополнительный совет по улучшению пользовательского опыта, позволяющий показать полный текст при наведении курсора на обрезанный текст. Свойства CSS для обрезки многострочного текста Для того, чтобы обрезать многострочный текст с помощью CSS, нам понадобятся следующие свойства: Применив эти свойства к элементу <p>, который...
Обрезка нескольких строк с троеточием на чистом CSS! Все мы знаем, что с помощью свойства text-overflow: ellipsis; можно добавить троеточие к одной строчке, которая выходит за пределы контейнера. Но также с помощью свойства -webkit-line-clamp мы можем обрезать несколько строк текста! Для его использования нужно также установить два нестандартных свойства: display: -webkit-box; и -webkit-box-orient: vertical; Обратите внимание, что без добавления overflow: hidden; содержимое не будет обрезано, но многоточие все равно будет отображаться после указанного количества строк.