CSSwhite-space属性详解与应用

一分耕耘，一分收获！既然都打开这篇《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 中 <textarea> 默认保留换行（内部值含 \n），但渲染到页面其他元素（比如