white-space 空白符处理属性

最后更新：2026-09-13

white-space white-space 空白符处理属性

white-space 属性用于控制元素内空白符（空格、制表符、换行符）的处理方式以及文本是否自动换行。它决定了浏览器是合并多个空格为一个、保留原始格式，还是在文本溢出时自动换行。这个属性在显示代码、保留排版格式或实现单行省略时非常关键。

white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;

值	类型	描述
`normal \| nowrap \| pre \| pre-wrap \| pre-line \| break-spaces`	关键字	空白符处理与换行规则

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

浏览器	Chrome	Edge	Firefox	Safari	Opera
white-space	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 实现单行文本省略号需要同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 三个属性。

重要： pre-wrap 和 pre-line 的区别：pre-wrap 保留所有空白符并自动换行；pre-line 合并空格但保留换行符，也会自动换行。

Qwhite-space: normal 和 nowrap 有什么区别？

Anormal 会合并连续的空白符，文本在容器边界处自动换行；nowrap 同样合并空白符，但禁止自动换行，文本会一直延伸直到遇到 <br> 标签。

Qpre 和 pre-wrap 什么时候该用哪个？

Apre 完全保留原始格式且不自动换行，适合显示代码块；pre-wrap 保留格式但会自动换行，适合需要自适应宽度的场景。

Qpre-wrap 和 pre-line 有什么区别？

A两者都允许自动换行：pre-wrap 保留所有空白符（连续空格也保留），pre-line 会合并连续空格、只保留换行符。需要保真缩进用 pre-wrap，只需要保留换行时用 pre-line。

Web-Tutorial 技术团队

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