中英文混排应使用 overflow-wrap: break-word 和 word-break: keep-all 配合 unicode-bidi: plaintext，确保中文按字、英文按词、中英交界处可断行，避免暴力截断与BIDI干扰。
中英文混排时 word-break: break-all 为什么会让英文单词被错误截断
直接用 word-break: break-all 确实能强制换行，但会无视英文单词边界，比如 "JavaScript" 可能被切成 "JavaScrip" 和 "t"，破坏可读性。它对中文友好（中文无空格也需断行），但对英文是“暴力断词”。
真正要的是：中文按字断、英文按词断、中英之间可断行。关键不是全靠 CSS，而是配合语义和少量 HTML 处理。
-
word-break: break-word已废弃，不要用 -
overflow-wrap: break-word是现代推荐，它只在必要时才在单词内断行（比如超长 URL），优先保持英文单词完整 - 对纯英文段落，加
hyphens: auto（需语言声明lang="en"）可启用连字符，但中文不支持该特性
用 unicode-bidi: plaintext 解决嵌入英文导致的换行异常
常见场景：一段中文里插入 <code>fetch()</code> 或 <em>API</em>，浏览器可能因双向文本算法（BIDI）把中英文当成一个“逻辑块”，拒绝在中间换行——哪怕容器很窄。
给包裹混排内容的容器加 unicode-bidi: plaintext，能关闭 BIDI 重排序，让换行行为回归到纯字符流层面，中文、英文、标点各自按自身规则处理。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须作用于直接包裹混排文本的元素，比如
<p class="mixed">，不能只加在<code>内部 - 搭配
overflow-wrap: break-word使用效果最稳 - 注意：此属性不影响 RTL 语言（如阿拉伯语）显示，仅用于解除中英文混合时的 BIDI 干预
避免用 强制不断行，改用 white-space: nowrap
有人为防止“的”字单独成行，在“这是我的项目”里插 ，结果导致整段无法换行，溢出容器。这是典型误用。
-
My Project Name），整个串变成一个“超长单词”，overflow-wrap也救不了 - 真需要某短语不折行，用
<span style="white-space: nowrap">我的项目</span>，样式可控且不影响外部换行逻辑 - 对代码片段，直接用
<code>+white-space: pre-wrap更稳妥，保留空格又允许换行
实际生效的最小 CSS 组合（复制即用）
以下规则适用于 <p>、<div> 或自定义类容器，覆盖绝大多数中英文混排场景：
body .mixed-text {
overflow-wrap: break-word;
word-break: keep-all; /* 中文不断字，英文不断词 */
unicode-bidi: plaintext;
}其中 word-break: keep-all 是关键：它禁止在中文内部断开（避免把“你好”拆成“你”+“好”），同时也不打断英文单词，换行只发生在空格、标点或中英文交界处。
如果遇到某些旧版 Safari 对 keep-all 支持不佳，可降级为 word-break: normal，再靠 overflow-wrap: break-word 补位——但务必测试真实设备，iOS 15.4+ 已无问题。
真正麻烦的从来不是写几行 CSS，而是没意识到中英文混排本质是“字符集 + 排版引擎 + 语义标记”的协同问题。漏掉 lang 属性、乱套 <span>、或者在富文本编辑器里粘贴带内联样式的文字，都会让上面这些规则失效。
