CSS3 `text-overflow` Property

Example

Using the text-overflow property:

div.test {
    text-overflow: ellipsis;
}

Browser Support

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

Property	Chrome	IE	Firefox	Safari	Opera
text-overflow	4.0	6.0	7.0	3.1	11.0 <br>9.0 -o-

Property Definition and Usage

The text-overflow property specifies how text that overflows its containing element should be displayed. It can be set to clip the text, display an ellipsis (...), or display a custom string (not supported by all browsers).

The text-overflow property requires the following two properties to be used together:

Default value:	auto
Inherited:	no
---	---
Animatable:	Yes. Read about animatable
---	---
Version:	3
---	---
JavaScript syntax:	object.style.textOverflow="ellipsis" Try it
---	---

Syntax

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

Value	Description
clip	Clips the text.
ellipsis	Displays an ellipsis (...) to represent the clipped text.
string	Uses the given string to represent the clipped text.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Hover to Show Full Text

CSS3 Tutorial: CSS3 Text Effects

❮ Pr Pos Right Css3 Pr Column Rule Color ❯