Обрезка многострочного текста с многоточием на чистом CSS

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

Причём хотел сделать это на чистом CSS, без использования javascript. Казалось бы, это простая задача, но я был разочарован, потому что простого кроссбраузерного CSS-решения для неё до сих пор нет.

Я пробовал несколько способов обрезки текста, но каждый раз обнаруживал, что «…» (троеточие) было не совсем правильным. Иногда оно появлялось далеко от конца текста или переходило на следующую строку.

Наконец-то я нашел хоть и не идеальное, но хорошее решение, о котором и рассказываю.

CSS свойство -webkit-line-clamp

Свойство -webkit-line-clamp позволяет ограничить содержимое контейнера блока по высоте указанным количеством строк. Этот метод мне очень нравится своей простотой, но, к сожалению, он не является кроссбраузерным (не работает в Firefox и Internet Explorer). Я надеюсь, что в будущем у нас будет обычное свойство CSS без префикса производителя.

CSS3 дал нам замечательное свойство text-overflow, которое обрезает текст и к концу строки добавляет многоточие. Однако text-overflow имеет серьёзное ограничение: работает только с одной строкой текста.

Как это работает?

Свойство -webkit-line-clamp работает только в сочетании с установленным display свойством -webkit-box или -webkit-inline-box и -webkit-box-orient свойством, установленным на vertical.

В большинстве случаев вы также захотите выбрать для overflow значение hidden, иначе содержимое не будет обрезано, но многоточие всё равно будет отображаться после указанного количества строк.

Чтобы обрезать текст по высоте и поставить многоточие в конце многострочного текста (в данном случае в конце 3-й строчки), используйте следующие CSS-стили:

.truncation {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Количество строк */
    -webkit-box-orient: vertical;  
}

Пример

HTML

<p class="truncation">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>

CSS

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

.truncation {
  display: block; /* Fallback for non-webkit */
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Результат

Просмотр демо на codepen.io

Что вы думаете? У вас есть другое решение для обрезки многострочного текста с помощью CSS? Расскажите о нём в комментариях.