HTML中让文本换行的三种常用方式：①适用于结构固定、内容短小的场景，但易受CSS影响；②CSS控制（white-space/overflow-wrap）适配响应式与长单词；③提供语义化软换行。
HTML 中让文本换行的三种常用方式
直接在 HTML 里写 <br> 最快，但得看场景——它只是强行折行，不带语义，也不响应宽度变化。
常见错误现象：white-space: nowrap 没关，或者父容器设了 display: inline，导致 <br> 失效；还有人用多个空格或 拼换行，结果在不同设备上错位。
- 纯内容分两行（如标题、按钮文字）：用
<br>，简单可靠 - 需要随容器宽度自动折行（比如一段描述）：靠 CSS 的
white-space和word-break控制，不用动 HTML 结构 - 想精确控制某两个词之间断行，又不想破坏语义：用
<wbr></wbr>（软换行提示），浏览器只在必要时才折
为什么 <br> 有时不生效
不是标签写错了，大概率是 CSS 把它“压扁”了。比如父元素设置了 display: flex 且没设 flex-wrap: wrap，或者用了 line-height: 0、font-size: 0 等清空文本样式的操作。
使用场景：表单标签、卡片标题、邮件模板等结构固定、内容短小的地方最稳妥。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被
white-space: nowrap或display: inline-block+vertical-align: top这类组合影响了行盒生成 -
<br>在pre标签里会原样保留，但在div里是标准换行符，行为一致 - 若用在 SVG 的
<text></text>里，<br>完全无效，得用<tspan></tspan>分段
CSS 方式比 <br> 更可控的几个点
当一句话要适配手机和桌面，或者中间有个长单词（比如 accessibility）容易撑破容器时，硬加 <br> 就会出问题。
参数差异明显：word-break: break-all 会把单词从中间砍开，而 overflow-wrap: break-word 只在实在放不下时才折，优先保词完整。
- 推荐组合：
white-space: normal（默认）+overflow-wrap: break-word，兼容性好，行为可预期 - 如果内容含大量英文 URL 或代码片段，加
word-break: break-all防溢出，但中文下慎用——可能把“你好世界”拆成“你好世
界” - 注意
hyphens: auto能自动连字符断行，但 Safari 对中文支持弱，别依赖它做主要方案
容易被忽略的细节：空格、全角/半角、零宽空格
有时候你以为写了两行，其实是复制粘贴带进了全角空格或不可见的 （零宽空格），浏览器渲染出来像断开了，实际没走换行逻辑。
性能影响不大，但调试时极难定位——尤其从 CMS 或富文本编辑器里吐出来的 HTML，常混着各种 Unicode 控制符。
- 用浏览器开发者工具的「Elements」面板右键「Edit as HTML」，把那段文字复制到编辑器里查编码
- 遇到奇怪的“断行失效”，先删掉所有空格重打，再试
<br> - 服务端输出前用正则清理：
.replace(/[\u200B-\u200D\uFEFF]/g, '')去掉零宽字符
