Open main menu

CDOT Wiki β

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 "..." }

Notes

Specification Conformance

Browser Compatibility

See Also