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!
HTML CSS
Result
EDIT ON
This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.
This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.
This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.
This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.
This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.
.overflow {
width: 10em;
outline: 1px solid #000;
margin: 0 0 2em 0;
/**
* Required properties to achieve text-overflow
*/
white-space: nowrap;
overflow: hidden;
}
