文字自动换行主要靠white-space和overflow-wrap（或word-break）协同控制：white-space: normal允许换行，overflow-wrap: break-word在必要时智能断词，兼顾中英文可读性与防溢出。
文字自动换行靠什么CSS属性
网页里文字不换行，通常不是HTML标签的问题，而是CSS控制失效。关键就两个属性：white-space 和 word-break，它们决定空格、长单词、中英文混合时怎么断行。
默认情况下，white-space: normal（浏览器默认值）会折叠空格、合并换行符，并在必要时换行；但遇到超长无空格字符串（比如一串base64或长URL），它就不换了——这时候得靠word-break或overflow-wrap。
-
word-break: break-all：强制在任意字符间断行，适合纯英文/数字长串，但中文也会被硬切，体验差 -
word-break: keep-all：中文不断词，英文单词也不拆，但长英文单词仍可能溢出 -
overflow-wrap: break-word（推荐）：只在实在放不下时才拆单词，对中英文都友好，且优先保持词完整
用<br>手动换行的适用场景和坑
<br>只是插入一个换行符，不产生新块级元素，也不影响布局流。它适合极少数明确需要“这里必须断行”的地方，比如地址、诗行、签名落款。
但别用它替代段落结构——比如把一段话拆成十几个<br>，会导致语义丢失、屏幕阅读器无法识别段落、响应式下难调整间距。
- 正确用法：
<p>北京市朝阳区建国路88号<br>SOHO现代城A座12层</p> - 错误用法：
<p>这是一段说明文字<br>它本该用CSS控制换行<br>而不是靠br硬塞</p> - 注意：
<br>是自闭合标签，写成<br>或<br>都行，但别写<br>（无效）
中英文混排时换行异常怎么调
中文没空格，浏览器按字断行；英文靠空格分词。混排时常见问题是英文单词卡住不换行，或者中文被break-all切成单字。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
最稳的组合是：
text {
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
}
如果还有问题，检查是否父容器设置了white-space: nowrap（常出现在导航栏、表格单元格里），或者用了display: inline类样式，这些都会禁用换行。
- 表格内文字不换行？给
<td>加<code>word-break: break-word - Flex容器里文字溢出？加
min-width: 0释放flex item的最小宽度限制 - 用了
font-family但字体缺失？某些Web字体加载失败时会回退到无断行支持的系统字体，建议用font-display: swap
移动端文字挤成一团怎么修
不是所有设备都默认启用文本换行优化。iOS Safari对overflow-wrap的支持曾有延迟，Android WebView旧版本对word-break解析也不一致。
稳妥起见，加一行兼容声明：
text {
overflow-wrap: break-word;
word-wrap: break-word; /* 旧版IE/Android fallback */
}
同时确认viewport设置正确：<meta name="viewport" content="width=device-width, initial-scale=1"> 缺了这句，很多换行策略会失效——因为浏览器以为你在桌面模式下渲染。
真正麻烦的是嵌套在position: absolute或transform里的文字，它们有时会触发GPU渲染层，绕过正常换行逻辑。这种时候，加will-change: auto或临时用transform: translateZ(0)反而会让换行恢复，但属于权宜之计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
