text

text-overflow

Controls how text is displayed when it is longer than its containing area.

Compatibility

  • text-overflow Firefox 7+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+

Not supported by Firefox prior to version 7. For detailed compatibility info see caniuse.com.

  • Firefox 7+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

General description

text-overflow: 1 clip

  • 1 The default behavior of words within a text paragraph, which are longer than its container. They simply overflow its boundaries. This is closely related to the overflow property. As soon as it is set to hidden, the text gets clipped, at auto the container becomes scrollable until the end of the text is reached.
Example

Alice did not at all like the tone of this remark, and thought it would be as well to introduce a very long word: floccinaucinihilipilification

Inspect me!?

Examples

Abbreviated with the ellipsis character

text-overflow: 1 ellipsis

  • 1 As soon as overflow is set to hidden longer words get clipped at the end and abbreviated with the ellipsis character. Only works in combination with the mentioned overflow value.
Example

Alice did not at all like the tone of this remark, and thought it would be as well to introduce a very long word: floccinaucinihilipilification

Inspect me!?

Text running in one line

text-overflow: 1 ellipsis

  • 1 Another property that is closely related to text-overflow is white-space. When it is set to nowrap the whole paragraph runs in one line, detaining it from wrapping.
Example

Alice did not at all like the tone of this remark, and thought it would be as well to introduce a very long word: floccinaucinihilipilification

Inspect me!?

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

word-wrap

Enables words to wrap even if they are longer than their container.

Compatibility

  • word-wrap Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 4+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Opera 11+

No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.

General description

word-wrap: 1 normal

  • 1 The default behaviour of a word that has no positions to wrap (space or slash) and is longer than its container is to simply overflow it.
Example

Alice glanced rather anxiously at the cook, to see if she meant to take the hint: honorificabilitudinitatibus

Inspect me!?

Example

Wrapping enabled

word-wrap: 1 break-word

  • 1 Now the word doesn’t overflow the container but rather breaks as soon as it reaches its boundaries.
Example

Alice glanced rather anxiously at the cook, to see if she meant to take the hint: honorificabilitudinitatibus

Inspect me!?

Further reading

For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).

x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • Red

    the General description in the text-overflow refers to… “text-shadow: clip”

    and

    the Compatibility in the word-wrap refers to… “text-overflow”

    I think these are typo, right?

    • http://www.css3files.com Christian Krammer

      Thank you very much for the hint, Red. I have already fixed it.

  • http://www.greenlightsolutions.nl/ Marco Vervoort

    The general summary is slightly misleading. It states ‘Controls how text is displayed when it is longer than its containing area’, but the text-overflow style only affects the display of individual words in the text that are wider than the containing area.
    It cannot be used to display an ellipsis if a text is longer than fits in the container’s height.

    • http://www.css3files.com Christian Krammer

      Thanks for the hint, I’ve changed the description so that it’s more understandable.

  • Arthur

    Are you sure about FF7+?
    I try with FF12 without success. I used sample code of w3c site.