In this section, we will learn what the text-overflow property is and how to use it in CSS.

Click here to run the example of text-overflow property.

CSS text-overflow Property Definition and Usage

The CSS `text-overflow` property is used to define how users should know when a part of a text content of an element is turned hidden.

Note: using this property doesn’t force any overflow and so in order to create an overflow in an element, we need to set these two properties to these values:

overflow: hidden;

white-space: nowrap;

CSS text-overflow Property Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

CSS text-overflow Property Value

Here’s the list of values that we can use for this property:

• clip: this value is the default one and when used, part of the content that caused the overflow, become clipped and hidden.
• ellipsis: using this value, browsers use (…) to represent the part of the text that was clipped.
• string: we can also set a string value to be shown as the representation of clipped content.
• The two global values, “initial” and “inherit” can also be used for this property.

Example: text-overflow in CSS

See the Pen text-overflow in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS text-overflow Property Work?

In this example, we used 5 asterisks for the value of `text-overflow` property, and so this value will be used to represent the clipped content.