文本溢出 | 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 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com