文本溢出 | text-overflow
text-overflow
text-overflowCSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，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 |
| visible overflow | 1234567890 | 1234567890 |
| text-overflow: clip | | 123456 |
| text-overflow: '' | 12345 | 123456 |
| text-overflow: ellipsis | 1234… | 1234567890 |
| text-overflow: '.' | 1234. | 1234567890 |
| text-overflow: clip clip | 123456 | 1234567890 |
| text-overflow: clip ellipsis | 1234… | 1234567890 |
| text-overflow: clip '.' | 1234. | 1234567890 |
| text-overflow: ellipsis clip | …3456 | 1234567890 |
| text-overflow: ellipsis ellipsis | …34… | 1234567890 |
| text-overflow: ellipsis '.' | …34. | 1234567890 |
| text-overflow: ',' clip | ,3456 | 1234567890 |
| text-overflow: ',' ellipsis | ,34… | 1234567890 |
| text-overflow: ',' '.' | ,34. | 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 |
