文本溢出 | 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属性只影响内联进程方向溢出块容器元素的内容（例如，不在文本框底部溢出的文本）。

语法

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>

结果

规范

此接口的早期版本到达候选人推荐现状。由于需要删除一些未列出的风险特性，规范被降级为工作草案级别，解释浏览器实现此属性的原因，但不以CR状态为限。

浏览器兼容性