CSS text-overflow Property

Last Updated : 11 Jul, 2025

The text-overflow property in CSS is your go-to feature when dealing with overflowing and hidden text. It works in tandem with the white-space property set to nowrap and the overflow property set to hidden. The overflowing content can be clipped, display an ellipsis (‘…’), or display a custom string.

Syntax:

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

Property Values: All the properties are described well in the example below.

clip: Text is clipped and cannot be seen. This is the default value.

Syntax:

text-overflow: clip;

Example: This example illustrates the use of the text-overflow property where its value is set to clip.

Output:

👁 Image

CSS text-overflow_clip

ellipsis: Text is clipped and the clipped text is represented as '...'.

Syntax:

text-overflow: ellipsis;

Example: This example illustrates the use of the text-overflow property where its value is set to ellipsis.

Output:

👁 Image

string: The clipped text is represented to the user using a string of the coder's choice. This option is only visible in the Firefox browser.

Syntax:

text-overflow: string;

where a string is defined by the developer.

Example: This example illustrates the use of the text-overflow property where its value is set to a specific string value.

Output:

👁 Image

initial: It is used to set an element’s CSS property to its default value ie., this value will set the text-overflow property to its default value.

Syntax:

text-overflow: initial;

Example: This example illustrates the use of the text-overflow property where its value is set to initial.

Output:

👁 Image

inherit: It is used to inherit a property to an element from its parent element property value ie., the value will set the text-overflow property to the value of the parent element.

Syntax: