CSS textoverflow Property (original) (raw)

CSS text-overflow Property

Last Updated : 28 Aug, 2024

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.

HTML `

`

**Output:

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.

HTML `

`

**Output:

**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.

HTML `

`

**Output:

**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.

HTML `

`

**Output:

**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:

text-overflow: inherit;

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

HTML `