text-overflow - CSS（层叠样式表） 编辑

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

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

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

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

初始值	clip
适用元素	block container elements
是否是继承属性	否
计算值	as specified
Animation type	discrete

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

此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 text-overflow 属性的值。

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		123456		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	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!

• Desktop
• Mobile

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。

另见

• Related CSS properties: overflow, white-space

(69.2017.4.4,多多包涵)