Наверняка в процессе разработке внешнего интерфейса порой возникает необходимость обрезать текст, представляемый пользователю. Причин для этого предостаточно: сохранение драгоценного места на экране, одинаковый внешний вид рядом расположенных блоков секции, отображение части информации с переключателем "show more" и т.д.
Большинство разработчиков знают, как реализовать обрезку текста для одной строки. Для этого требуется заданная ширина и использование сочетания правил overflow: hidden, white-space: nowrap и text-overflow: ellipsis. Все это вместе заставит текст обрезаться до одной строки и добавит многоточие в конце текста.
Однако это все валидно для случая обрезки именно до одной строки. В некоторых сценариях для пользовательского интерфейса полезно обрезать текст после нескольких строк. Как, к примеру, реализовать обрезку текста в этих блоках до трех строк?
Способы обрезки нескольких строк
К сожалению, долгое время не существовало простого способа реализовать обрезку многострочного текста. Все решения в основном вращаются вокруг подсчета слов, подсчета букв или помещения текста в контейнер с жестко заданной высотой. И каждое из этих решений по своему является неуклюжими, негибкими и имеет свои проблемы и недостатки.
Подсчет слов и букв требует использования JavaScript и он сильно зависит от языка и длины слов, что в итоге все равно может привести к неравномерной обрезке. Подсчет букв вообще может привести к тому, что слова для пользователя будут неполными.
Размещение текста внутри блока с заданной высотой - это уже CSS решение. Однако проблема связана со свойствами шрифта и межстрочного интервала, что также делает его крайне негибким.
Свойство line-clamp
Для решения вышеописанных проблем в WebKit было добавлено правило CSS -webkit-line-clamp. Оно принимает целочисленное значение и ограничивает содержимое используемого элемента указанным количеством строк. Требования для обрезки этим способом заключаются в том, что среди свойств элемента должно быть свойство display со значением либо -webkit-box, либо -webkit-inline-box, а также свойство -webkit-box-orient: vertical. Все это будет выглядеть примерно следующим образом:
.content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}Что происходит, так это то, что CSS отобразит весь контент, но ограничит его после указанного количества строк (в данном случае 3). В конце третей строки будет добавлено многоточие. Также, нужно добавить свойство overflow: hidden для скрытия остальных строк.
Теперь в нашем примере все элементы едины и всегда обрезаются до одинакового количества строк.
Поддержка браузерами этих удобных правил CSS всегда была одним из их самых больших недостатков и поэтому свойство пока пишется с префиксом. Тем не менее line-clamp является частью модуля CSS Overflow уровня 3, который может обеспечить более широкую поддержку в будущем.
Комментарии (0)