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.
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
。例如：
overflow: hidden; white-space: nowrap;
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).
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:
clip
,
ellipsis
,
fade
fade()
, which is passed a
<length>
或
<percentage>
to control the fade distance
<string>
.
clip
text-overflow
as an empty string, if that is supported in your target browsers:
text-overflow: '';
.
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>
<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.
<percentage>
is resolved against the width of the line box. Values lower than
0
are clipped to
0
. Values greater than the width of the line box are clipped to the width of the line box.
| 初始值 |
clip
|
|---|---|
| 适用于 | block container elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
[ clip | ellipsis | <string> ]{1,2}
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: " [..]";
}
<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>
注意：
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 值 |
direction: ltr
|
direction: rtl
|
||
|---|---|---|---|---|
| Expected Result | Live result | Expected Result | Live result | |
| visible overflow | 1234567890 | 1234567890 | 0987654321 | 1234567890 |
text-overflow: clip
|
|
1234567890 |
|
1234567890 |
text-overflow: ''
|
12345 | 1234567890 | 54321 | 1234567890 |
text-overflow: ellipsis
|
1234… | 1234567890 | …4321 | 1234567890 |
text-overflow: '.'
|
1234. | 1234567890 | .4321 | 1234567890 |
text-overflow: clip clip
|
123456 | 1234567890 | 654321 | 1234567890 |
text-overflow: clip ellipsis
|
1234… | 1234567890 | 6543… | 1234567890 |
text-overflow: clip '.'
|
1234. | 1234567890 | 6543. | 1234567890 |
text-overflow: ellipsis clip
|
…3456 | 1234567890 | …4321 | 1234567890 |
text-overflow: ellipsis ellipsis
|
…34… | 1234567890 | …43… | 1234567890 |
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 |
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Overflow Module Level 4 |
Added the values
<string>
and
fade
和
fade()
function
|
|
|
CSS Overflow Module Level 3
The definition of 'text-overflow' in that specification. |
工作草案 | 初始定义 |
A previous version of this interface reached the 候选推荐 status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the 工作草案 level, explaining why browsers implemented this property unprefixed, though not at the CR state.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-overflow
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
7
注意事项
|
IE
完整支持
6
|
Opera
完整支持
11
|
Safari 完整支持 1.3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 |
Firefox Android
完整支持
7
注意事项
|
Opera Android
完整支持
11
|
Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
fade()
Experimental
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
fade
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
| <string> | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 9 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 9 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
| Two-value syntax | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 9 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 9 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
要求使用供应商前缀或不同名称。
overflow
,
white-space
overflow-wrap
,
word-break