white-space属性是HTML文本换行的底层控制，决定空白符保留与自动折行。nowrap强制单行，需配合块级元素与宽度；pre-line保留换行符并合并空格，适合用户输入；pre-wrap保留缩进。表格单元格换行需设宽度、white-space:normal及overflow-wrap，且table-layout:fixed作用于table。换行由di
white-space 这个CSS属性，是HTML文本换行的核心控制机制。它不负责具体在哪个位置断行，而是从底层定义两件事：空白符（空格、换行符、制表符）是否保留，以及遇到容器边界时是否允许自动折行。所谓的“换行算法”，实际上是浏览器按照CSS规范执行的一套判定流程，逐条件匹配，并不涉及高深智能。
该值相当于给文本套上“紧箍咒”，直接关闭两个能力：源码中的换行符全部当作普通空格处理；自动折行逻辑被禁用。结果就是，文本像一条刚性胶带，即使超出容器宽度也绝不自动断开。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
实际工作中常遇到几个误区：
white-space: nowrap，却未设置 display: block 或宽度限制。内联元素本身不认 width，“溢出”根本不可见，看起来就像属性未生效。display: flex 且未声明 flex-wrap: wrap，此时子项即使设置 white-space: normal，也会被flex布局引擎强制压缩为单行。overflow-wrap: break-word，但 white-space: nowrap 优先级更高，后续断词规则直接被跳过，不会执行。后端返回的字符串中带有 \n（例如评论、地址、日志），前端需要让这些换行符真正生效，就需要依靠这两个值。选错了，要么空白全部丢失，要么出现滚动条。
实际使用最广泛的是 pre-line：
\n 作为换行信号。pre-wrap 则在你明确需要保留原始缩进时登场：
pre 是同一回事。）里换行总失败？检查这三件事
默认不换行，这不是bug，而是规范如此。要让内容正常折行，三步缺一不可：
- 给
设置一个 max-width 或 width（百分比或像素均可），否则容器没有“边界”可折。
- 设置
white-space: normal（或 pre-line），开启自动换行逻辑。
- 如果单元格内有长URL或Base64等内容，记得加上
overflow-wrap: break-word。
还有一个关键点常被忽略：table-layout: fixed 必须写在 上。否则列宽由内容撑开，你给 设置的 max-width 根本不会生效。
说到底，换行从来不是单个CSS属性就能搞定的事。它是 display 类型、容器尺寸、white-space 和断词策略四个因素共同作用的结果。调一个属性没反应，别着急，先打开computed样式，看看这四项的实际值到底是多少。