CSS参考手册
基本用户界面 | Basic User Interface
文本溢出 | text-overflow
text-overflow
CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。
/* 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;
text-overflow
属性不会强制发生溢出。要使文本溢出它的容器,你必须设置一些其他的CSS属性。例如:
overflow: hidden;
white-space: nowrap;
text-overflow
属性只影响内联进程方向溢出块容器元素的内容(例如,不在文本框底部溢出的文本)。
初始值 |
clip |
---|---|
适用元素 |
block container elements |
是否是继承属性 |
no |
适用媒体 |
visual |
计算值 |
as specified |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
text-overflow
属性可以使用一个或两个值来指定。如果给定了一个值,则会为行尾指定溢出行为(右端为从左到右的文本,左端为从右到左的文本)。如果给出两个值,则第一个指定行的左端的溢出行为,第二个指定行的右端。
每个值被指定为下列之一:
- 关键字值中的一个:
clip
,ellipsis
,fade
- 函数
fade()
(about:blank#fade(%20%3Clength%3E%20%7C%20%3Cpercentage%3E%20%29),通过a<length>
或<percentage>
来控制淡入距离
- 一个
<string>
。
值
clip
此属性的默认值。该关键字值将在内容区域的极限处截断文本,因此截断可能发生在字符中间。夹在你指定的字符之间的转换text-overflow
为空字符串,如果在你的目标浏览器支持:text-overflow: '';
。ellipsis
此关键字值将显示省略号('…'
,U+2026 Horizontal Ellipsis
)以表示剪辑的文本。省略号显示在内容区域内,减少显示的文字量。如果没有足够的空间来显示省略号,则会剪切。<string>
将<string>
被用来表示剪切文本。该字符串显示在内容区域内,缩短显示文本的大小。如果没有足够的空间显示字符串本身,则会剪切。fade
此关键字剪辑溢出内联内容,并在边框附近应用淡出效果,并在边缘处具有完全透明度。fade( <length> | <percentage> )
此功能剪辑溢出内联内容,并在边框附近应用淡出效果,并在边缘处具有完全透明度。参数确定应用淡入淡出效果的距离。这<percentage>
是解决了线框的宽度。低于0
剪切的值0
。大于行框宽度的值将被裁剪为行框的宽度。
正式语法
[ clip | ellipsis | <string> ]{1,2}
示例
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>
结果
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 4The definition of 'text-overflow' in that specification. |
Working Draft |
Added the values <string> and fade and the fade() function |
CSS Basic User Interface Module Level 3The definition of 'text-overflow' in that specification. |
Candidate Recommendation |
Initial definition |
此接口的早期版本到达候选人推荐现状。由于需要删除一些未列出的风险特性,规范被降级为工作草案级别,解释浏览器实现此属性的原因,但不以CR状态为限。
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
1.0 (312.3) |
(Yes) |
7.0 (7.0)1 |
6.02 |
9-o3 11.0 |
1.3 (312.3) |
Two-value syntax |
No support |
No support |
9.0 (9.0) |
No support |
No support |
No support |
String value |
No support |
No support |
9.0 (9.0) |
No support |
No support |
No support |
fade |
No support |
No support |
No support |
No support |
No support |
No support |
fade() |
No support |
No support |
No support |
No support |
No support |
No support |
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 |
No support |
No support |
9.0 (9.0) |
No support |
No support |
No support |
String value |
No support |
No support |
9.0 (9.0) |
No support |
No support |
No support |
fade |
No support |
No support |
No support |
No support |
No support |
No support |
fade() |
No support |
No support |
No support |
No support |
No support |
No support |
基本用户界面 | Basic User Interface相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。