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

Если у вас есть длинный текст, но поместить его нужно в одну строку и красиво обрезать многоточием, то проблем нет. Для этого есть специальное свойство 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, когда это позволяет техническое задание и перечень необходимых браузеров в нем.