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

27509 просмотров
Автор: Николай Ковалёв

Рассмотрим два варианта как можно при помощи 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;
4.73 15 голосов
Валюта цен: BYN RUB