text-overflow 文本溢出属性

最后更新：2026-09-13

text-overflow text-overflow 文本溢出属性

text-overflow 属性用于控制当文本溢出其容器时如何显示，最常见的用途是配合 overflow: hidden 和 white-space: nowrap 实现单行文本省略号效果。它支持直接截断（clip）和省略号（ellipsis）两种处理方式，是界面设计中处理长文本的常用手段。

text-overflow: [ clip | ellipsis | <string> ]{1,2};

值	类型	描述
`clip \| ellipsis`	关键字	文本溢出省略号

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
text-overflow	✓ v10	✓ v12	✓ v1	✓ v1	✓ v10
所有主流浏览器均支持

重要： text-overflow 必须配合 overflow: hidden（或 scroll/auto）和 white-space: nowrap 才能生效，单独设置无效。

提示： 多行文本省略号需要结合 -webkit-line-clamp、display: -webkit-box 和 -webkit-box-orient: vertical 实现，属于 WebKit 私有属性。

Qtext-overflow 为什么没有生效？

A请检查是否同时设置了 overflow: hidden 和 white-space: nowrap，并且容器有明确的宽度限制。缺少任一条件都不会触发溢出省略效果。

Q如何实现多行文本的省略号？

A标准 CSS 只支持单行省略。多行省略可使用 -webkit-line-clamp 属性（限制行数）配合 display: -webkit-box 和 overflow: hidden 实现，目前主流浏览器均已支持。

Q单行文本省略号怎么写？

A需要三个属性配合：white-space: nowrap（禁止换行）、overflow: hidden（隐藏溢出）、text-overflow: ellipsis（显示省略号），且容器必须有固定或受限宽度，三者缺一不可。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。