CSSwhite-space属性详解与应用
2026-01-24 21:42:45
0浏览
收藏
亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS white-space 属性使用详解》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。
white-space: normal 会合并空白符并自动换行，pre 则完全保留所有空白符且不自动换行；需折行时应选 pre-wrap 或配合 overflow-wrap/break-word。
white-space: normal 和 pre 的区别在哪
默认值 normal 会合并连续空格、制表符和换行符，只保留一个空格，并允许文本在容器边界处自动换行；pre 则完全保留所有空白字符（包括换行、缩进），且**不自动换行**，超出容器宽度会撑宽父元素或出现水平滚动条。
常见误用是以为 pre 能“保留换行+自动折行”，其实它不折行。需要折行得配合 pre-wrap。
normal：适合常规段落，但粘连的多个空格会被压成一个pre：适合代码块、日志原始输出，但需手动加pre-wrap：保留换行和空格，同时允许在空格/连字符处折行——日常最实用的组合
让长英文单词或 URL 自动断行用什么值
仅靠 white-space 无法解决长无空格字符串（如 https://example.com/verylongpathwithnospaces）的换行问题。必须搭配 word-break 或 overflow-wrap。
white-space: normal + overflow-wrap: break-word 是最稳妥的组合：前者允许折行，后者在必要时强制在单词内断开；word-break: break-all 更激进，会在任意字符间断行（包括中文词中），慎用。
code {
white-space: normal;
overflow-wrap: break-word;
word-break: normal; /* 避免和 break-all 冲突 */
}textarea 里按 Enter 换行但显示不生效？
HTML 中