white-space: pre-wrap是保留换行又自动折行的唯一可靠方案；overflow-wrap: break-word用于单词级断行，word-break: break-all会破坏中文语义；单行省略需width、white-space: nowrap、overflow: hidden三者共存。
white-space 是折行控制的开关，不是可选项
浏览器默认把连续空格、换行符都当一个空格处理，white-space: normal看似“正常”，实则丢掉了用户原始换行意图。想保留 \n 又要自动折行，唯一可靠的是 white-space: pre-wrap——它不依赖额外包裹标签，也不强制撑宽容器，适合评论、日志、Markdown 渲染后的内容。
常见错误是误用 white-space: pre：保留了换行，但长 URL 或无空格英文串直接横向溢出；或者混用 text-overflow: ellipsis，而 pre-wrap 根本不支持省略号，写了也无效。
-
white-space: pre-line也能保留换行，但会合并连续空白（比如多个空格变一个），适合纯文本清洗后展示 - 表格单元格里文本不折行？大概率是框架悄悄加了
white-space: nowrap，得显式覆盖为normal - 服务端返回带
\n的字符串，前端直接插进<div>，不设 <code>pre-wrap就等于放弃格式overflow-wrap 和 word-break 的分工不能颠倒
overflow-wrap: break-word（推荐写法）只在单词超容器宽度时才断行，优先保全语义完整性，适合英文、URL、邮箱等场景；word-break: break-all则粗暴到任意字符间都能切，中文可能断在字中间，体验差。关键限制：二者都必须配合固定宽度（
width或max-width），否则浏览器没参照系，根本不知道“在哪算超”。- 中英文混排时，
overflow-wrap: break-word对英文友好，但对连续中文无效（中文无自然词界），此时需搭配word-break: keep-all防止乱切字 -
word-break: break-word是旧写法，已废弃，别再用 - Bootstrap 5+ 默认给
td加white-space: nowrap，导致表格被长 URL 撑开，修复只需一行：td { white-space: normal; overflow-wrap: break-word; }
单行截断 … 必须三者齐备，缺一不可
text-overflow: ellipsis不是独立属性，它只是“画省略号”的指令，真正起作用的是三个条件共同构成的闭环：- 父容器必须有明确宽度（
width或max-width，百分比也行，但auto不行） -
white-space: nowrap—— 强制不换行，才能“挤”出溢出部分 -
overflow: hidden—— 把溢出内容藏掉，否则省略号不会出现
漏掉任一条件，就只剩一长串被截断但没省略号的文本，或者干脆完全不截。调试时建议先确认容器 computed width 是否如预期，再逐条检查这三项 CSS 是否生效。
语义化结构比强行折行更重要
用一堆
<br>模拟段落，或靠word-break: break-all强行压扁长词，短期见效，长期会让内容失去结构。屏幕阅读器无法识别段落边界，复制粘贴带出多余空格，响应式下还容易错位。真正可控的排版，来自语义标签 + 精确 CSS：
- 正文用
<p></p>，不是<div class="text">；小标题用 <code><h2></h2>～<h6></h6>，按层级嵌套 - 地址、诗歌等需保留人工换行的场景，才用
<br>，且避免连续多个 - 长 HTML 标签属性本身也要换行：每个属性独占一行，或按功能分组缩进，否则
class、data-、事件绑定混在一起，改起来像解谜
最易被忽略的点：所有这些 CSS 属性的效果，都依赖于容器尺寸是否被正确约束。没有
max-width或flex-basis，overflow-wrap和text-overflow都是摆设。 - 中英文混排时，
