CSS如何让文本溢出部分显示省略号

在前端页面开发中，经常会遇到文本内容超过容器宽度或高度的情况，为了避免布局被破坏，我们需要将溢出部分的文本用省略号展示。根据文本是单行还是多行，CSS的实现方式有所不同，下面分别介绍两种场景的实现方法。

单行文本溢出显示省略号

单行文本溢出显示省略号需要同时满足三个条件，缺一不可：

• 容器需要有明确的宽度限制，否则文本会无限换行，不会出现溢出
• 设置文本不换行，避免文本自动折行到下一行
• 设置溢出内容隐藏，同时指定文本溢出时显示省略号

下面是单行文本溢出的完整实现代码：

/* 单行文本省略样式 */
.single-line-ellipsis {
  width: 200px; /* 容器宽度，可根据实际需求调整 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
  border: 1px solid #eee; /* 可选：添加边框方便观察效果 */
  padding: 8px; /* 可选：添加内边距优化显示 */
}

对应的HTML结构如下，注意标签名称需要转义展示：

<div class="single-line-ellipsis">
  这是一段很长的单行文本内容，当内容超过容器宽度时，多余的部分会被省略号替代
</div>

多行文本溢出显示省略号

多行文本溢出显示省略号主要用于限制文本显示的行数，超出指定行数的部分用省略号替代。这种方式在WebKit内核的浏览器（如Chrome、Safari）中兼容性较好，是常见的实现方案。

实现多行文本省略需要用到WebKit私有的属性，核心是通过-webkit-line-clamp指定显示的行数，同时配合弹性盒模型让文本按垂直方向排列。

下面是多行文本溢出的完整实现代码：

/* 多行文本省略样式，兼容WebKit内核浏览器 */
.multi-line-ellipsis {
  width: 200px; /* 容器宽度，可根据实际需求调整 */
  display: -webkit-box; /* 使用WebKit的弹性盒模型 */
  -webkit-box-orient: vertical; /* 设置盒子内子元素垂直排列 */
  -webkit-line-clamp: 3; /* 限制显示的行数，这里设置为3行 */
  overflow: hidden; /* 隐藏溢出内容 */
  border: 1px solid #eee; /* 可选：添加边框方便观察效果 */
  padding: 8px; /* 可选：添加内边距优化显示 */
  line-height: 24px; /* 可选：设置行高，让行数计算更准确 */
}

对应的HTML结构如下：

<div class="multi-line-ellipsis">
  这是一段很长的多行文本内容，当内容超过我们设置的3行显示范围时，多余的部分会被省略号替代。这种方式适合用在卡片标题、内容简介等场景，能够有效控制页面布局的整洁性。
</div>

注意事项

使用多行文本省略时需要注意，-webkit-line-clamp是WebKit私有的CSS属性，在Firefox、IE等浏览器中不被支持。如果需要兼容更多浏览器，可以考虑通过JavaScript计算文本高度，动态截断文本内容来实现省略效果。

另外，如果文本容器本身没有固定高度，设置-webkit-line-clamp时，建议同时设置行高，这样可以更精准地控制显示的行数，避免出现行数计算偏差的问题。

文本溢出省略号CSS技巧单行文本多行文本