Многоточие в конце строки на CSS

9 февраля 2020 18:30:24

22391 просмотр

Автор: Николай Ковалёв

Смотреть демо

Рассмотрим два варианта как можно при помощи CSS обрезать длинный однострочный или многострочный текст.

Вариант 1

В этом варианте из всего текста получится только одна строка с многоточием на конце.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Вариант 2

Если же нужно сделать многоточие, к примеру, на второй строке текста, используем следующий вариант. В свойстве -webkit-line-clamp указываем необходимое количество строк.

display: -webkit-box;
-webkit-line-clamp: 2; // количество строк
-webkit-box-orient: vertical;
overflow: hidden;

5.00 10 голосов

Материалы по теме

8 мая 2018 17:53:00

Не срабатывает событие click на iPad и iPhone (iOS)

При разработке сайтов с использованием jQuery, на устройствах с операционной системой iOS (в частности браузер Safari), может возникнуть проблема с обработкой события click, из-за чего владельцам iPhone и iPad будет не доступна часть функционала сайта.

24 февраля 2018 15:04:00

Стилизация placeholder на чистом CSS

Атрибут placeholder используется в полях форм и представляет собой некую подсказку для пользователей. Иногда приходится стилизовать эту подсказку под дизайн сайта, поэтому в этой статье мы рассмотрим самый простой и самый удобный способ стилизации placeholder с использованием только CSS.