CSS3 text-overflowProperty
Example
Using the text-overflow property:
div.test {
text-overflow:ellipsis;
}
Try it Yourself »
More examples at the bottom of this page.
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Property definition and usage instructions
The text-overflow property specifies how text should be displayed when it overflows the element containing it. It can be set so that overflowed text is clipped, displayed as an ellipsis (...), or displayed as 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 |
| animation: | Supported.Read Aboutanimatable |
| Version: | 3 |
| JavaScript Syntax: | object.style.textOverflow="ellipsis" Try it Yourself |
Syntax
text-overflow: clip|ellipsis|string|initial|inherit;
| Value | Description | |
|---|---|---|
| clip | Clip text. | |
| ellipsis | Show ellipsis...to represent the truncated text. | |
| string | Use the given string to represent the clipped text. | |
| initial | Set to the property's default value.Read Aboutinitial | |
| inherit | Inherit this property value from the parent element.Read Aboutinherit |
More Examples
Hover to display the entire text
This example demonstrates how to display the entire text when the mouse hovers over the element.
Related Articles
CSS3 Tutorial:CSS3 Text Effects
other extensions