CSS3 text-overflow property
Using text-overflow properties:
div.test
{
text-overflow:ellipsis;
}
{
text-overflow:ellipsis;
}
Try it out . . .
There are more examples at the bottom of this page.
Browser support
The numbers in the table support the first browser version number of the property.
| Attributes | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 |
11.0
9.0 -o- |
Description of property definition and use
The text-overflow property specifies what should happen when the text overflows the element that contains it.
| Default: | clip |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.textOverflow="ellipsis" |
Grammar
text-overflow: clip|ellipsis|
string
;
| Value | Describe |
|---|---|
| clip | Trim the text. |
| ellipsis | Displays omitted symbols to represent the trimmed text. |
| string | Use a given string to represent the trimmed text. |
More instances
Hover displays the entire text
This example shows how to display the entire text when the mouse hovers over the element.
Related articles
CSS3 tutorial: CSS3 Text Effects