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

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

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

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

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

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

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

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

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

100vh не корректно работает для мобильных устройств

Июль 23, 2021 г.

Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема. В интернете можно найти ...

Читать

Позиционирование фона с помощью background-position

Май 3, 2018 г.

В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position. Свойство можно задать отдельно для оси X и Y,  кроме того можно задать 2, 3 или 4 параметра. Классический случай - позиционирование с ...

Читать

 

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

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



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

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

  1. Blade:

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