Переполнение текста - CSS-хитрости

text-overflowСвойство в CSS рассматриваются ситуации , когда текст обрезается , если оно переполняет бокс элемента. Его можно обрезать (т.е. обрезать, скрыть), отображать многоточие ('…', значение диапазона Unicode U + 2026) или отображать строку, определенную автором (в настоящее время браузер не поддерживает строки, определенные автором).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Обратите внимание , что text-overflowпроисходит только тогда , когда контейнер overflowсвойство имеет значение hidden, scrollили autoи white-space: nowrap;.

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

В следующей демонстрации показано поведение text-overflowсвойства, включая все возможные значения. Поддержка браузеров различается!

Посмотрите на эту ручку!

Установка overflowна scrollили autoбудет отображать полосы прокрутки для отображения дополнительного текста, а hiddenне будет. Скрытый текст можно выбрать, выбрав многоточие.

Старые вещи

В старой версии спецификации говорится, что вы можете использовать URL-адрес изображения для многоточия, но похоже, что это было отброшено.

Существует двухзначный синтаксис, например text-overflow: ellipsis ellipsis;, который контролирует переполнение с левой и правой сторон одного и того же контейнера. Я не уверен, как этого можно достичь. Возможно, центрированный текст в слишком маленьком контейнере? В новой спецификации говорится, что это, как и определение строки, «подвержено риску».

Не знаю, откуда ellipsis-wordвзялась. Этого нет в спецификации или какой-либо другой документации, кроме WebPlatform.org.

text-overflowСвойство используется как сокращение для комбинации text-overflow-modeи text-overflow-ellipsis, но не больше , и эти отдельные свойства не существует.