CSS 文本溢出

在网页设计过程中，文本内容的显示常常会遇到溢出的问题，为了解决这个问题，CSS 提供了 text-overflow 属性，可以控制文本内容的超出部分如何显示。

text-overflow 属性

text-overflow 属性用来设置当文本溢出容器时如何处理。它只有在设置了文本溢出（overflow: hidden）和白色空间不够显示所有文字（white-space: nowrap）的情况下才生效。

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

以上代码中，当 .container 容器中的文本内容溢出时，超出部分会由省略号 ... 来表示。

text-overflow 值

常用的 text-overflow 属性值有：

• clip：剪裁超出容器的文本，不显示省略号，也不换行。
• ellipsis：将超出容器部分用省略号 ... 代替。
• <string>：自定义省略号的样式。

实例

下面的代码片段演示了如何使用 text-overflow 属性来控制文本溢出时的显示效果。

<div class="content">
  <p class="long-text">CSS 文本溢出示例：如果文本超出容器部分，将用省略号来表示。</p>
</div>

.content {
  width: 200px;
  height: 60px;
  border: 1px solid #ccc;
  overflow: hidden;
  white-space: nowrap;
}

.long-text {
  font-size: 16px;
  line-height: 20px;
  text-overflow: ellipsis;
}

效果如下：

注意事项

• text-overflow 属性只对单行文本有效，如果要处理多行文本，需要使用 JavaScript 或者其他技术来实现。

• text-overflow 属性只对 block 和 inline-block 元素有效，不适用于 inline 和 table 相关的元素。

• text-overflow 属性不是 CSS3 规范的一部分，是在 CSS2 规范中引入的，但是得到了所有现代浏览器的支持。