在CSS布局中，文字换行异常是最容易被忽视却又频繁引发界面错乱的问题。当一段连续英文字母、数字或者中英混排内容进入固定宽度的容器时，浏览器默认的换行规则往往无法兼顾美观与完整显示。此时就需要依靠word-break与white-space两个属性进行精细干预，而不是盲目使用overflow隐藏。
white-space属性的底层机制与取值对比
white-space主要控制元素内空白符（空格、制表符、换行符）的处理方式，以及内容是否会自动换行。它的默认值normal会合并连续空格、忽略源码中的换行，并在必要时折行。如果将其设为nowrap，文本则永远不会主动折行，所有内容排成一行，直到碰到<br>标签或被外部强制截断。
除了normal和nowrap，还有pre、pre-wrap、pre-line等取值。pre会保留源码中的空格与换行，但不自动折行；pre-wrap保留空白且允许自动折行；pre-line合并空格但保留换行符并允许折行。理解这些差异，才能判断文字不换行到底是属性设错还是内容本身含有不可断行的结构。
下面是一段演示不同white-space效果的代码，通过切换类名可以直观看到容器高度与溢出状态的变化：
<div class="box normal">Hello World 这是一段测试文本 1234567890abcdefghijklmnopqrstuvwxyz</div>
<div class="box nowrap">Hello World 这是一段测试文本 1234567890abcdefghijklmnopqrstuvwxyz</div>
<style>
.box { width: 200px; border: 1px solid #ccc; margin-bottom: 10px; }
.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
</style>
word-break如何决定单词断点位置
word-break解决的是“一个词太长时能不能从中间断开”的问题。默认normal下，英文单词、数字串不会在内部断开，只能在整个词之间换行，这导致超长链接或哈希值会直接溢出。设为break-all后，浏览器可以在任意字符间断行，适合纯技术字符串展示；而keep-all则近似于中日韩文字也按词断，不推荐混排场景使用。
需要注意，word-break: break-all会与white-space: nowrap产生冲突：后者禁止换行，前者允许断词但无换行机会，最终表现仍是不折行溢出。因此修复异常时要同时审查两个属性，而不是只改其中一个。
以下代码展示长哈希值在默认与break-all下的区别：
/* 错误：长字符串溢出 */
.card { width: 180px; white-space: normal; word-break: normal; }
/* 修正：允许任意位置断词 */
.card-fixed { width: 180px; white-space: normal; word-break: break-all; }
真实项目中的组合策略与避坑实践
在表格单元格中，经常遇到用户昵称含连串表情或字母导致列宽撑破。此时可给td设置word-break: break-word（旧版word-wrap: break-word兼容写法）并配合white-space: normal，既保留普通句子换行习惯，又防止极端长内容破坏结构。注意break-word与break-all不同，它优先在词间换行，只在无处可去时才断词。
弹窗标题若使用white-space: nowrap配合text-overflow: ellipsis，必须确认父级宽度固定，否则省略号不生效。若标题可能含超长英文，应改为white-space: normal加word-break: break-all，牺牲单行美观换取完整可读。如下方示例，通过媒体查询在移动端切换策略：
<div class="modal-title">用户支付流水号TX20230912ABCDEF1234567890结束</div>
<style>
.modal-title { width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
.modal-title { white-space: normal; word-break: break-all; text-overflow: clip; }
}
</style>
最后建议将换行规则封装为工具类，如.wrap-break-all与.nowrap-ellipsis，在组件中按需引用，避免重复书写导致语义混乱。当再次出现文字换行异常时，先审查white-space是否误锁换行，再检查word-break能否断词，基本都能定位问题。
word-breakwhite-spacecss_text_wrap修改时间：2026-08-15 19:58:12