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.
Mozilla Recommended Values
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 "..." }