Line-clamp. Обрезка многострочного текста в CSS.
Как легко обрезать многострочный текст с помощью CSS
В этой статье я расскажу, как с помощью нескольких свойств CSS можно легко добиться эффекта обрезки многострочного текста и показать многоточие в конце обрезанного текста. Также дам дополнительный совет по улучшению пользовательского опыта, позволяющий показать полный текст при наведении курсора на обрезанный текст. Свойства CSS для обрезки многострочного текста Для того, чтобы обрезать многострочный текст с помощью CSS, нам понадобятся следующие свойства: Применив эти свойства к элементу <p>, который...
📰 CSS‑трюк: многострочная обрезка текста без JS
📰 CSS‑трюк: многострочная обрезка текста без JS Карточка товара, описание курса, превью блога — контента больше, чем места. Хочется оборвать текст «…» после пары строк, но не писать JavaScript‑костыль с измерением высоты. Достаточно трёх CSS‑свойств, и браузер сделает всё сам. /* Обрезать текст после *n* строк и показать многоточие */ .truncate-2 { display: -webkit-box; /* создаём флекс‑контейнер старого типа */ -webkit-box-orient: vertical;/* вертикальное направление */ -webkit-line-clamp: 2; /* 👉 количество видимых строк */ overflow:...