text-overflow

< css‎ | properties
Jump to: navigation, search

text-overflow

This article is Almost Ready.


W3C Candidate Recommendation

Summary

The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-mode and text-overflow-ellipsis

Overview table

Initial value not defined for shorthand properties
Applies to block-level and inline-block elements
Inherited No
Media visual
Computed value see individual properties
Animatable No
CSS Object Model Property <'text-overflow-mode'>

Syntax

  • text-overflow: clip
  • text-overflow: ellipsis
  • text-overflow: ellipsis-word


Values

clip
Default. Simply clips the content and does not display ellipsis for text-overflow.
ellipsis
Display ellipsis (...) for text overflow after the last letter that entirely fits into a line.
ellipsis-word
Display ellipsis (...) for text overflow after the last word that entirely fits into a line.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
?
Unknown
6.0
Yes
9
prefix
11.0
Yes
1.3
Yes
Two-value syntax
?
none
?
Unknown
?
none
?
none
?
none
String value
?
none
?
Unknown
?
none
?
none
?
none

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Yes
7.0
Yes
?
Unknown
?
Yes
?
Yes
Two-value syntax
?
none
9.0
Yes
?
none
?
none
?
none
String value
?
none
9.0
Yes
?
none
?
none
?
none


Examples

View live exampleThe following example shows how to use ellipsis, ellipsis-word and clip values for the text-overflow property.

HTML

<!-- example showing text-overflow shorthand property -->
<div class="overflowed overflowed-clip">
	<p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis">
	<p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis-word">
	<p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>

View live example

CSS

.overflowed > p{
	width: 10em;
	height: 5em;
	white-space: nowrap; 
	overflow: hidden;
}

.overflowed-clip {
	text-overflow: clip;
}

.overflowed-ellipsis > p {
	text-overflow: ellipsis;
}

.overflowed-ellipsis-word > p {
	text-overflow: ellipsis-word;
}

Notes

Remarks

This property only applies to text overflow in the inline direction (horizontal, in normal Western text). Inline overflow occurs when the text in a line overflows the available width without a breaking opportunity. To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag. If there is no breaking opportunity (for example, the width is narrow or there is a long word that does not break well), then overflow may occur without nowrap being applied. This property on the element must be set to something other than visible, the default, in order for ellipses to be rendered. The best choice is to set overflow to hidden. Setting overflow to scroll or auto will also work, but will show scrollbars. The hidden text can be selected by selecting the ellipses. When selected, the ellipses will disappear and be replaced by the text to the extent of the layout area. This property offers an efficient alternative to building ellipses in Dynamic HTML (DHTML). As ellipses may be rendered many times on a single page, using this property can significantly speed up performance.

Syntax

text-overflow: ellipsis | clip


See also

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]