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

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

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

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

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

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

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

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

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

Июль 15, 2025 г.

В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими. EM - размер относительно размера шрифта родителя [crayon-68cb90dc3c1be265546190/] 2em внутри .child ...

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать
 

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

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



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

Один комментарий в “Переполнение текста (text-overflow)”

  1. Blade:

    Только это реально помогло для многострочного варианта. Большое спасибо