В этой статье я расскажу, как с помощью нескольких свойств CSS можно легко добиться эффекта обрезки многострочного текста и показать многоточие в конце обрезанного текста. Также дам дополнительный совет по улучшению пользовательского опыта, позволяющий показать полный текст при наведении курсора на обрезанный текст. Свойства CSS для обрезки многострочного текста Для того, чтобы обрезать многострочный текст с помощью CSS, нам понадобятся следующие свойства: Применив эти свойства к элементу <p>, который...

Каждый из нас знает про text-overflow: ellipsis — ту самую магию, что обрезает текст и добавляет многоточие «…», если он не помещается в контейнер. А что делать, если хочется показывать title только тогда, когда текст обрезан? Раньше мне казалось, что это невозможно… но решение оказалось проще, чем я думал! 👌 Трюк, который решает задачу: сравниваем внутренние размеры элемента (clientWidth и clientHeight) с его размерами с прокруткой (scrollWidth и scrollHeight). Это простое сравнение подскажет, когда текст обрезан, а когда нет...