text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。

 

text-overflow.png

一般在容器的极限处进行截断。如果想在裁剪处显示空白符,可以使用 ('').

这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致(举个反例:内容在盒子的下方溢出。此时就不会生效)。文本可能在以下情况下溢出:当其因为某种原因而无法换行(例子:设置了"white-space:nowrap"),或者一个单词因为太长而不能合理地被安置(fit)。

这个属性并不会强制“溢出”事件的发生,因此为了能让"text-overflow"能够生效,程序员们必须要在元素上添加几个额外的属性,比如"将overflow 设置为hidden"。

初始值clip
适用元素block container elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

Syntax

/* Overflow behavior at line end
   Right end if ltr, left end if rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* Overflow behavior at left end | at right end
   Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

clip
这个关键字的意思是"在内容区域的极限处截断文本",因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断,你必须使用一个空字符串值 ('')(To truncate at the transition between two characters, the empty string value ('') must be used.)。此为默认值。
ellipsis
这个关键字的意思是“用一个省略号 ('…'U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号都容纳不下,那么这个省略号也会被截断。
<string>
<string>用来表示被截断的文本。字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号都容纳不下,那么这个字符串也会被截断。

Formal syntax

[ clip | ellipsis | <string> ]{1,2}

示例

CSS content

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 content

<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

CSS value direction: ltr direction: rtl
Expected Result Live result Expected Result Live result
visible overflow 1234567890

1234567890

0987654321

1234567890

text-overflow: clip t-o_clip.png

123456

t-o_clip_rtl.png

1234567890

text-overflow: '' 12345

123456

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

,53.

1234567890

说明

Specification Status Comment
CSS Basic User Interface Module Level 4
text-overflow
Working Draft Added the values <string> and fadeand the fade() function
CSS Basic User Interface Module Level 3
text-overflow
Proposed Recommendation Initial definition

此接口的较早版本曾经被纳入候选名单。 但由于需要对某些尚未列出的风险点进行删除工作,因此该规范已降级到“工作草案”。所以说浏览器无前缀地实现此属性,但其却不在CR状态。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (312.3) (Yes) 7.0 (7.0)[1] 6.0[2] 9-o[3]
11.0
1.3 (312.3)
Two-value syntax 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
String value 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
fade 未实现 未实现 未实现 未实现 未实现 未实现
fade() 未实现 未实现 未实现 未实现 未实现 未实现
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 7.0 (7.0) ? (Yes) (Yes)
Two-value syntax 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
String value 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
fade 未实现 未实现 未实现 未实现 未实现 未实现
fade() 未实现 未实现 未实现 未实现 未实现 未实现

[1] 从 Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 起,修正了text-overflow属性在行内溢出的块级元素两端都溢出的显示效果,早前的版本如果仅仅使用一个属性(比如说text-overflow:ellipsis;),可能会导致块级元素文本两端都会变为省略号,而不是仅仅期望的仅仅在文本末尾显示省略号。

[2] IE 8 提供了带有浏览器前缀的版本, -ms-text-overflow,和text-overflow作用相同。但是并不推荐这样使用。

[3] Opera 9 和 10 要求带有浏览器前缀 -o-text-overflow

另见

(69.2017.4.4,多多包涵)

文档标签和贡献者

 最后编辑者: AC-greener,