Как ограничить длину текста с помощью css

При разработке сайтов нередки случаи, когда требуется ограничивать длину текста Например, если вы используете дивовую верстку с float: left, в которой высота каждого дива должна быть одинаковой.

Но, представьте, что в этой верстке мы используем заголовок, который имеет непредсказуемую длину. В этом случае, если он будет не влезать в одну строку, то перенесется на следующую. В итоге из-за разного количества строк высота каждого дива может быть разной и верстка распадется.

С помощью стилей мы можем задать любому тексту определенную высоту, зайдя за которую, текст как бы обрезается и общая высота остается одинаковой для всех элементов. Рассмотрим два css метода реализации:

1. Ограничить высоту блока с текстом

Этот метод кроссбраузерный и его часто используют для принудительной обрезки высоты текста. Рассмотрим пример:

<div style=”
height: 31px;
overflow: hidden;
font-size: 12px;
line-height: 16px;
“>
Здесь какой-то длинный текст, например в 600 символов…
</div>

С помощью overflow: hidden; обрезается все, что превышает высоту дива в height: 31px; За счет font-size и line-height вы можете регулировать междустрочный интервал и размер шрифта, чтобы в данный див влезало, к примеру ровно две строки.

2. Ограничиваем длину текста с помощью text-overflow

Это дасточно новый метод, который я использую недавно. Он позволяет ограничивать высоту текста по строкам. Рассмотрим пример (только стиль):

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

Так как количество строк будет везде одинаковым, то высота текста также окажется одного размера.