如何通过css设置文本溢出省略号text-overflow

单行文本溢出省略需设置overflow: hidden、white-space: nowrap和text-overflow: ellipsis，并限定宽度；多行则用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient: vertical，同样需隐藏溢出，适用于WebKit浏览器，注意兼容性及容器宽度限制。

当文本内容超出容器宽度时，可以通过 CSS 设置显示省略号（...）来优雅地处理溢出。实现这一效果需要结合多个 CSS 属性，确保文本在单行或多行情况下都能正确截断并显示省略号。

单行文本溢出省略号

适用于只显示一行文本，超出部分用省略号表示。

• overflow: hidden：隐藏溢出内容
• white-space: nowrap：禁止文本换行
• text-overflow: ellipsis：溢出时显示省略号

示例代码：

.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;        /* 必须有固定或最大宽度 */
  border: 1px solid #ccc;
}

多行文本溢出省略号

用于限制文本显示为两行或更多行，超出后自动加省略号。

立即学习“前端免费学习笔记（深入）”；

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

27

查看详情

• display: -webkit-box：启用弹性盒子模型
• -webkit-line-clamp：限制行数
• -webkit-box-orient: vertical：设置子元素垂直排列
• 同样需要 overflow: hidden

示例代码（两行省略）：

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
  border: 1px solid #ddd;
}

注意：该方式在非 WebKit 浏览器中可能不完全支持，需测试兼容性或使用 JavaScript 替代方案。

注意事项和常见问题

确保省略号正常显示，需要注意以下几点：

• 容器必须有明确的宽度或最大宽度（如 width、max-width），否则无法判断何时溢出
• 块级元素更可靠，行内元素建议改为 inline-block 或 block
• 避免在父元素上使用 word-break: break-all 等影响布局的属性
• 多行省略仅在支持 -webkit-line-clamp 的浏览器中生效

基本上就这些。根据实际需求选择单行或多行方案，合理设置宽高和溢出控制，就能实现清晰美观的文本截断效果。

以上就是如何通过css设置文本溢出省略号text-overflow的详细内容，更多请关注php中文网其它相关文章！