Несколько дней назад мне пришлось обрезать многострочный блок текста по высоте с добавлением многоточия.
Причём хотел сделать это на чистом 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? Расскажите о нём в комментариях.
