CSS text-overflow attribute

Definition and usage

The text-overflow attribute specifies what happens when text overflows the containing element.

See also:

CSS3 Tutorial:CSS3 Text Effects

HTML DOM Reference Manual:textOverflow attribute

Example

Use the text-overflow attribute:

div.test
{
text-overflow:ellipsis;
}

Try it yourself

More examples at the bottom of the page.

CSS syntax

text-overflow: clip|ellipsis|string;

Attribute value

Value Description Test
clip Truncate text. Test
ellipsis Display an ellipsis to represent the truncated text. Test
string Use the given string to represent the truncated text.

Technical details

Default value: clip
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.textOverflow="ellipsis"

More examples

Text-overflow with hover effect
This example demonstrates how to display all text when the cursor hovers over an element.

Browser support

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

Numbers with -o- indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
4.0 6.0 7.0 3.1 11.0
9.0 -o-