В этой статье я расскажу, как с помощью нескольких свойств CSS можно легко добиться эффекта обрезки многострочного текста и показать многоточие в конце обрезанного текста. Также дам дополнительный совет по улучшению пользовательского опыта, позволяющий показать полный текст при наведении курсора на обрезанный текст.
Свойства CSS для обрезки многострочного текста
Для того, чтобы обрезать многострочный текст с помощью CSS, нам понадобятся следующие свойства:
- display: -webkit-box; - это свойство задает тип отображения элемента как блочно-строчный флекс-контейнер, который поддерживает свойство -webkit-line-clamp.
- -webkit-box-orient: vertical; - это свойство определяет ориентацию флекс-контейнера как вертикальную, то есть флекс-элементы будут располагаться в столбец.
- -webkit-line-clamp: 3; - это свойство указывает максимальное количество строк, которые могут отображаться в флекс-контейнере. В нашем случае мы задаем значение 3, что означает, что текст будет обрезан после третьей строки.
- overflow: hidden; - это свойство скрывает часть содержимого элемента, которая не помещается в заданную область. Это необходимо для того, чтобы многоточие появлялось в конце обрезанного текста.
Применив эти свойства к элементу <p>, который содержит многострочный текст, мы получим следующий результат:
Дополнительный совет по улучшению пользовательского опыта
Если вы хотите, чтобы пользователи могли увидеть полный текст, когда они наводят курсор на обрезанный текст, вы можете использовать атрибут title в HTML-теге <p>. Атрибут title позволяет задать текст, который будет отображаться во всплывающей подсказке при наведении курсора на элемент. Просто укажите в атрибуте title полный текст, который вы хотите показать, например:
Теперь, когда пользователь наведет курсор на обрезанный текст, он увидит полный текст во всплывающей подсказке.
Подписывайся на канал, тебя ждет еще больше интересных заметок для Frontend разработчика.
