+7 (812) 9-515-415

Как обрезать текст многоточием

Если у вас есть длинный текст, но поместить его нужно в одну строку и красиво обрезать многоточием, то проблем нет. Для этого есть специальное свойствоtext-overflow: ellipsis

Трудности начинаются если нужно оставить больше строк. Для браузеров, поддерживающих префикс -webkit можно написать группу свойств:


.text-box {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

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

Для других браузеров придется задавать высоту блока исходя из размера шрифта и междустрочного интервала и скрывать обычным overflow. Либо добавлять псевдоэлемент ::after, у которого будет многоточие в свойстве content и фон разный цвету фона, который перекроет часть текста. Конечно, такой вариант не подойдет для цветного фона.

И, конечно, всегда в запасе есть вариант с использованием JS, при котором просто рассчитывается количество помещающихся в блок букв. Но я предпочитаю варианты на CSS, когда это позволяет техническое задание и перечень необходимых браузеров в нем.

К размышлению
Оглавление