CSS 文本溢出隐藏

在前端开发中，当文本内容超出容器时，可以通过 CSS 来控制文本溢出的显示方式。例如，隐藏超出部分并显示省略号。这种需求常见于 标题栏、按钮、或表格单元格 等有限空间中。下面是常用的几种 CSS 文本溢出隐藏的方法。

1. 单行文本溢出隐藏

对于单行文本，如果内容过长并超出容器宽度，可以使用 text-overflow、white-space 和 overflow 属性来控制文本显示。最终效果是显示一行文本，如果超出显示范围，则显示省略号 ...。

/* 单行文本溢出隐藏 */
.overflow-hidden {
  white-space: nowrap;        /* 强制文本不换行 */
  overflow: hidden;           /* 隐藏溢出部分 */
  text-overflow: ellipsis;    /* 用省略号替代被隐藏的文本 */
}

<div class="overflow-hidden" style="width: 200px;">
  这是一个非常长的文本示例，它可能会超出容器的宽度，所以需要用省略号来隐藏。
</div>

2.多行文本溢出隐藏

对于多行文本溢出隐藏，通常需要使用 line-clamp 技术。这种方式可以限制文本显示的行数，并在超出部分显示省略号。

/* 多行文本溢出隐藏 */
.multiline-overflow {
  display: -webkit-box;             /* 结合 -webkit-box 实现多行截断 */
  -webkit-box-orient: vertical;     /* 设置垂直排列 */
  -webkit-line-clamp: 3;            /* 限制显示的行数，这里是 3 行 */
  overflow: hidden;                 /* 隐藏超出内容 */
}

• display: -webkit-box：使用 -webkit-box 布局模式，兼容性较好。

• -webkit-box-orient: vertical：指定 box 的方向为垂直。

• -webkit-line-clamp: 3：显示的最大行数，这里是 3 行。

• overflow: hidden：隐藏溢出的内容。

<div class="multiline-overflow" style="width: 300px;">
  这是一个非常长的文本示例，包含了多行内容。我们希望在显示的区域内，如果文本过长超过了指定的行数，可以自动使用省略号来隐藏溢出部分。
</div>