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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
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.
Each value is specified as one of:
- one of the keyword values:
clip
,ellipsis
,fade
- the function
fade()
, which is passed a<length>
or a<percentage>
to control the fade distance - a
<string>
.
Values
clip
- 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: ;
. ellipsis
- 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. <string>
'- The
<string>
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. fade
'- 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.
fade( <length> | <percentage> )
'- 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.
- The argument determines the distance over which the fade effect is applied. The
<percentage>
is resolved against the width of the line box. Values lower than0
are clipped to0
. Values greater than the width of the line box are clipped to the width of the line box.
Formal definition
Initial value | clip
|
Applies to | block container elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
[ clip | ellipsis | <string> ]{1,2}
Examples
CSS
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
/* BOTH of the following are required for text-overflow */
white-space: nowrap;
overflow: hidden;
}
.overflow-visible {
white-space: initial;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
/* Not supported in most browsers,
see the 'Browser compatibility' section below */
text-overflow: " [..]";
}
HTML
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Result
Note: Live results in the following table may be shown incorrectly due to a limitation of the MDN Editor which removes the all contents of style attributes which have text-overflow
properties with string value.
CSS value | direction: ltr
|
direction: rtl
|
||
---|---|---|---|---|
Expected Result | Live result | Expected Result | Live result | |
visible overflow | 1234567890 |
1234567890 |
0987654321 |
1234567890 |
text-overflow: clip
|
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3587/9b0ca18067d9a1002c8c3603f1b498d0/t-o_clip.png|class=default internal|t-o_clip.png]] | [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3588/3801137ebaf67d18ffb522cd810661a9/t-o_clip_rtl.png|class=default internal|t-o_clip_rtl.png]] | ||
text-overflow:
|
12345 |
1234567890 |
54321 |
1234567890 |
text-overflow: ellipsis
|
1234… | …4321 | ||
text-overflow: '.'
|
1234. |
1234567890 |
.4321 |
1234567890 |
text-overflow: clip clip
|
123456 | 654321 | ||
text-overflow: clip ellipsis
|
1234… | 6543… | ||
text-overflow: clip '.'
|
1234. |
1234567890 |
6543. |
1234567890 |
text-overflow: ellipsis clip
|
…3456 | …4321 | ||
text-overflow: ellipsis ellipsis
|
…34… | …43… | ||
text-overflow: ellipsis '.'
|
…34. |
1234567890 |
…43. |
1234567890 |
text-overflow: ',' clip
|
,3456 |
1234567890 |
,4321 |
1234567890 |
text-overflow: ',' ellipsis
|
,34… |
1234567890 |
,43… |
1234567890 |
text-overflow: ',' '.'
|
,34. |
1234567890 |
,43. |
1234567890 |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Overflow Module Level 4 | Added the values <string> and fade and the fade() function
| |
CSS Overflow Module Level 3The definition of 'text-overflow' in that specification. | Working Draft | Initial definition |
A previous version of this interface reached the Candidate Recommendation status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the Working Draft level, explaining why browsers implemented this property unprefixed, though not at the CR state.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-overflow
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 7 Full support 7 Notes' Until Firefox 10, handling of |
IE Full support 6 Full support 6 Full support 8 Prefixed' Implemented with the vendor prefix: -ms- |
Opera Full support 11 Full support 11 Full support 9 Prefixed' Implemented with the vendor prefix: -o- |
Safari
Full support 1.3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 7 Full support 7 Notes' Until Firefox 10, handling of |
Opera Android Full support 11 Full support 11 Full support 10.1 Prefixed' Implemented with the vendor prefix: -o- |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
fade
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
<string> | Chrome
No support No |
Edge
No support No |
Firefox
Full support 9 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 9 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Two-value syntax | Chrome
No support No |
Edge
No support No |
Firefox
Full support 9 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 9 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Related CSS properties:
overflow
,white-space
- CSS properties that control line breaks in words:
overflow-wrap
,word-break
text-overflow by Mozilla Contributors is licensed under CC-BY-SA 2.5.