Усечение многострочного текста с помощью CSS

Для обрезания мы будем использовать только CSS. Это стало немного легче, так как Firefox (начиная с версии 68) начал поддерживать свойство -webkit-line-clamp. Но есть другой способ, который мы сегодня и рассмотрим.

Для измерения используем line-height

Допустим, что для элемента задан межстрочный интервал в 1.4rem. При этом нужно убедиться, что в нем выводятся не более трех строк текста. Для этого установите max-height со значением 1.4rem * 3.

Затем объявим переменную, и используем ее, чтобы установить общий межстрочный интервал (свойство line-height).

 CSS

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

Установите максимальную высоту

Усечение текста осуществляется следующим образом.

CSS

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

Добавляем многоточие

Многоточие (...) означает, что весь текст не поместился в заданном блоке. Использовать многоточие считается хорошей практикой при усечении длинного текста. Иначе контент оборвется неожиданно и неуклюже.

Если задать элементу свойство position: relative, многоточие можно будет расположить в правом нижнем углу.

CSS

.truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

Я установил многоточие вверху с помощью следующей строки кода: top: calc(var(--lh) * (var(--max-lines) - 1)). Если текст слишком короткий, свойство overflow: hidden его обрежет.

Но это не решает проблему с максимально допустимым количеством строк. Многоточие отображается, когда длина текста соответствует максимально разрешенному количеству строк и когда он длиннее.

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

Если текст слишком короткий, убираем многоточие

Если длина текста равна значению --max-lines или меньше, его нужно скрыть. Для этого нужно создать маленький блок с таким же цветом, что и фон. Затем установить его поверх многоточия, тем самым спрятав его. Это можно сделать следующим образом:

CSS

.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0; /* примечание: не используем bottom */
  width: 1rem;
  height: 1rem;
  background: white;
}

Здесь мы не используем свойство bottom. Благодаря этому блок окажется внизу контента, а не внизу относительного родительского элемента.

Сделаем блоки красными, чтобы они стали более заметными.

Верхний пример содержит больше трех строк, поэтому мы видим многоточие. Во втором примере только две строки, поэтому красный многоточие будет скрыто. Последний пример демонстрирует, что этот способ работает, даже если контент в точности равен значению --max-lines.

Демо

Здесь я хотел использовать логические свойства CSS. Но если нужна поддержка Internet Explorer, придется использовать свойства bottom и right.

Данные о поддержке браузерами взяты из Caniuse.

ПК

Смартфон или планшет