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

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

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

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

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

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

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

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

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

Убираем нативный крестик в поле ввода под IE

Май 13, 2018 г.

Во время ввода в текстовом поле IE появляется "крестик", который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не ...

Читать

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-65f9793ad03b1717890181/] ...

Читать

 

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

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



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

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

  1. Blade:

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