text-overflow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The SVG text-overflow attribute specifies how text content block elements render when text overflows line boxes. This can happen, for example, when the white-space attribute or CSS white-space property has the value nowrap. The property does not apply to pre-formatted text or text situated on a path.

In SVG, text-overflow has an effect if there is a validly specified wrapping area, regardless of the computed value of the overflow property on the text content block element. The effect is purely visual: clipped text is not removed from the DOM, and any ellipsis, if presented, does not itself become part of the DOM. For all the DOM methods, it is as if text-overflow was not applied, and as if the wrapping area did not constrain the text.

Note: As a presentation attribute, text-overflow also has a CSS property counterpart: text-overflow. When both are specified, the CSS property takes priority.

Usage notes

Value clip | ellipses
Default value clip
Animatable No
clip

Any text that overflows the wrapping area is clipped. Characters may be partially rendered. This is the default value.

ellipsis

If the text to be rendered overflows the wrapping area, the text is clipped and an ellipsis is rendered such that it fits within the given area.

For more information, refer to the CSS text-overflow property.

Specifications

Specification
CSS Overflow Module Level 3
# text-overflow
Scalable Vector Graphics (SVG) 2
# TextOverflowProperty

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-overflow
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 7 (Release date: 2011-09-27)
footnote
footnote Until Firefox 10, handling of text-overflow on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as text-overflow: ellipsis;), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
Opera – No support
Opera 9 – 12.1 (Release date: 2006-06-20)
prefix
footnote Removed in 15 and later
prefix Implemented with the vendor prefix: -o-
Opera – Full support
Opera 11 (Release date: 2010-12-16)
footnote Full support
Safari – Full support
Safari 1.3 (Release date: 2005-04-15)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 7 (Release date: 2011-09-27)
footnote
footnote Until Firefox for Android 10, handling of text-overflow on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox for Android 10, if only one value was specified (such as text-overflow: ellipsis;), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
Opera Android – No support
Opera Android 10.1 – 12.1 (Release date: 2010-11-09)
prefix
footnote Removed in 14 and later
prefix Implemented with the vendor prefix: -o-
Opera Android – Full support
Opera Android 11 (Release date: 2011-03-22)
footnote Full support
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also