text-overflow

Specifies how hidden content is signaled to the user.

Syntax

text-overflow: <value>;

The following values can be be appplied to the text-overflow property:

  • clip: Default value. Cuts off/hides the overflowing content.
  • ellipsis: Displays an ellipsis, “…”.
  • " ": A custom string set by the author.

Note: The properties white-space: nowrap; and overflow: hidden; are required for text-overflow to work.

Example 1

Setting a div so that overflowing text is represented with an ellipsis.

div {
text-overflow: ellipsis;
/* Additional properties required for text-overflow to function: */
overflow: hidden;
white-space: nowrap;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy