CSS3 text-overflow Property


Use of the text-overflow property:

div {
    text-overflow: ellipsis;

Try it yourself »

More "Try it Yourself" examples below.

Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

Default value: clip
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.textOverflow="ellipsis" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-

CSS Syntax

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

Property Values

Value Description Play it
clip Default value. Clips the text Play it »
ellipsis Render an ellipsis ("...") to represent clipped text Play it »
string Render the given string to represent clipped text
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


More Examples

Text-overflow with a hover effect
This example demonstrates how to display the entire text when hover over the element.

Related Pages

CSS3 tutorial: CSS3 Text Effects

HTML DOM reference: textOverflow property




Search w3schools.com:

Translate w3schools.com: