Переполнение текста (text-overflow)

Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком.

CSS предоставляет специальное свойство для управления ситуацией с переполнением текста — text-overflow. Согласно спецификации, он может принимать разные значения, в том числе и:

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

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

Многострочный вариант text-overflow

Здесь нам поможет CSS свойство line-champ, которое сейчас поддерживается всеми новыми браузерами:

Написать комментарий

Мало букафф? Читайте есчо !

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

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

Читать

 

Комментарии к «Переполнение текста (text-overflow)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: