Css text overflow ellipsis

Css text overflow ellipsis

Определение и применение

CSS свойство text-overflow указывает, что должно произойти, когда текст переполняет, содержащий элемент.

Применение свойства рассматривается в тех ситуациях, когда текст обрезается, либо когда он переполняет содержимое элемента, в этих случаях текст можно обрезать, поставить троеточие (‘. ‘, Юникод — U+2026), или отобразить определенную пользовательскую строку(в настоящее время поддерживается только в Firefox). Т.е. text-overflow происходит, когда свойство overflow имеет значения hidden , scroll или auto и свойство white-space имеет значение nowrap (перенос слов запрещён).

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 9.0+ 11.0+ 1.3+ 7.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию clip
Наследуется Нет
Применяется К блочным элементам
Ссылка на спецификацию http://dev.w3.org/csswg/css3-ui/#text-overflow

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3


Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .


text-overflow: clip | ellipsis



Результат данного примера показан на рис. 1.

Рис. 1. Многоточие в конце текста


Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .

Easily manage projects with monday.com

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box. It can be clipped (i.e. cut off, hidden), display an ellipsis (‘…’, Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

Читайте также:  Amd e1 1200 apu

Note that text-overflow only occurs when the container’s overflow property has the value hidden , scroll or auto and white-space: nowrap; .

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

The following demo displays the behavior of the text-overflow property including all the possible values. Browser support varies!

Setting overflow to scroll or auto will display scrollbars to reveal the additional text, while hidden will not. The hidden text can be selected by selecting the ellipses.

Old Stuff

An old version of the spec says you could use an URL to an image for the ellipsis, but it looks as if that was dropped.

There is a two-value syntax, e.g. text-overflow: ellipsis ellipsis; , that would control the overflow on the left and right sides of the same container. I’m not sure how that would be possible to achieve. Perhaps centered text in a too-small container? The new spec says this, as well as defining a string, is "at risk."

I’m not sure where ellipsis-word came from. It’s not in the spec or in any other documentation other than on WebPlatform.org.

The text-overflow property used to be shorthand for the combination of text-overflow-mode and text-overflow-ellipsis , but not anymore and those separate properties don’t exist.

Ссылка на основную публикацию
Adblock detector