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 中 默认保留换行（内部值含 n），但渲染到页面其他元素（比如