CSS GUIDE TEXT-OVERFLOW

This document is a work in progress and is subject to change.

Summary

In CSS 3, The text-overflow property is a shorthand property for the text-overflow-mode property and the text-overflow-ellipsis property. The text-overflow property deals with the situation where some textual content is clipped when it overflows the element's box. This situation only occurs when the overflow property has the values: hidden, scroll or auto.

Applicability:	The overflow property affects block-level and inline-block elements
Media Group:	Visual
Inherited:	No

Syntax

TARGET_ELEMENT{ text-overflow: [text-overflow-mode] [text-overflow-ellipsis] }

Legal Values

Since this is a shorthand property method for the text-overflow-mode property and text-overflow-ellipsis property, the legal values of text-overflow property will consist of the legal values that this property encapsulates.

For the text-overflow-mode property, the legal values are:

• clip - The text is clipped as appropriate for the text content. Glyphs representation of the text may only be partially rendered.
• ellipsis - A visual hint is inserted at the box boundary where text overflow occurs. The text-overflow-ellipsis property determines the content of the hint. The insertions take place after the the last letter that entirely fits on the line.
• ellipsis-word - A visual hint is inserted at the box boundary where text overflow occurs. The text-overflow-ellipsis property determines the content of the hint. The insertions take place after the last word that entirely fits on the line.

For the text-overflow-ellipsis property, the legal values are:

• a string value for the overflow visual hint.
• a URI value of an image to be used for the overflow visual hint.

Usage Examples

/* text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis "..." }

/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: clip }

/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis-word "..." }

Specification Conformance

• CSS 3

See Also

• text-overflow-ellipsis
• text-overflow-mode