text-overflow
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘ … ‘), or display a custom string.
Try it
The text-overflow property doesn’t force an overflow to occur. To make text overflow its container, you have to set other CSS properties: overflow and white-space . For example:
overflow: hidden; white-space: nowrap;
The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).
Syntax
text-overflow: clip; text-overflow: ellipsis ellipsis; text-overflow: ellipsis " [..]"; /* Global values */ text-overflow: inherit; text-overflow: initial; text-overflow: revert; text-overflow: revert-layer; text-overflow: unset;
The text-overflow property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.
Values
The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: »; .
This keyword value will display an ellipsis ( ‘…’ , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.
The to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.
This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
Formal definition
Formal syntax
CSS text-overflow Property
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (. ), or display a custom string.
Both of the following properties are required for text-overflow:
| 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.
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| clip | Default value. The text is clipped and not accessible | Demo ❯ |
| ellipsis | Render an ellipsis («. «) to represent the clipped text | Demo ❯ |
| string | Render 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
Example
Text-overflow with a hover effect (show entire text on hover):
div.a <
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
>
div.a:hover overflow: visible;
>