text-overflow

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box. It can be clipped (i.e. cut off, hidden), display an ellipsis (‘…’, Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Note that text-overflow only occurs when the container’s overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

The following demo displays the behavior of the text-overflow property including all the possible values. Browser support varies!

<style>.clip { text-overflow: clip; }</style>
<p class="overflow clip">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.ellipsis { text-overflow: ellipsis; }</style>
<p class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.word { text-overflow: ellipsis-word; }</style>
<p class="overflow word">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.text { text-overflow: "---"; }</style>
<p class="overflow text">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.double { text-overflow: ellipsis ellipsis; text-align: center; }</style>
<p class="overflow double">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

.overflow {
  	width: 10em;
  outline: 1px solid #000;
  margin: 0 0 2em 0;
  
  /**
   * Required properties to achieve text-overflow
   */
	  white-space: nowrap;
  	overflow: hidden;
}

body style {
  display: block;
  font: 14px monospace;
  padding: 3px;
  margin: 0 0 5px 0;
}

Setting overflow to scroll or auto will display scrollbars to reveal the additional text, whilehidden will not. The hidden text can be selected by selecting the ellipses.

Old Stuff

An old version of the spec says you could use an URL to an image for the ellipsis, but it looks as if that was dropped.

There is a two-value syntax, e.g. text-overflow: ellipsis ellipsis;, that would control the overflow on the left and right sides of the same container. I’m not sure how that would be possible to achieve. Perhaps centered text in a too-small container? The new spec says this, as well as defining a string, is “at risk.”

I’m not sure where ellipsis-word came from. It’s not in the spec or in any other documentation other than on WebPlatform.org.

The text-overflow property used to be shorthand for the combination of text-overflow-modeand text-overflow-ellipsis, but not anymore and those separate properties don’t exist.

Related Properties

• white-space
• overflow
• word-break
• width

Browser Support