white-space: pre-wrap 是多语言混排时保留换行且自动折行的唯一可靠选择，它既保留原始 \n，又允许在容器边界处折行，不撑宽容器，适用于日志、评论等api返回的含\n字符串。

white-space: pre-wrap 是多语言混排时保留换行 + 自动折行的唯一可靠选择

服务端返回带 \n 的多语言字符串（比如中英混杂的日志、用户评论），前端直接插入 <div> 后文本错位或横向溢出，根本原因不是字体或编码问题，而是 <code>white-space 没设对。浏览器默认的 white-space: normal 会把所有换行符和连续空格都压缩成单个空格——你写的 \n 就等于没写。

必须显式设为 white-space: pre-wrap：它既保留原始 \n，又允许在容器边界处自动折行，且不强制撑宽容器。这对 Markdown 渲染后的内容、API 返回的富文本、多语言客服对话记录尤其关键。

常见踩坑点：

• 误用 white-space: pre：保留换行但禁用折行，长 URL 或无空格英文串直接横向溢出，滚动条出现
• 混用 text-overflow: ellipsis：pre-wrap 不支持省略号，写了也无效，还可能掩盖真实布局问题
• 在表格单元格里漏覆盖框架默认值：Bootstrap 5+ 给 <td> 加了 <code>white-space: nowrap，得单独重置为 normal 或 pre-wrap

  overflow-wrap: break-word 和 word-break: keep-all 配合处理中英文混排断行

  纯中文段落不会因单词边界折行，但英文、URL、邮箱等有自然词界的内容，一旦超宽就需主动干预。此时不能靠 white-space 解决，而要靠 overflow-wrap 和 word-break 协同控制。

  overflow-wrap: break-word 是首选：只在单词整体超容器宽度时才断行，保全语义，适合英文、URL、技术术语；word-break: keep-all 则防止中文被切在字中间——二者叠加才能兼顾中英文。

  注意硬性前提：

  • 必须配合明确宽度：width 或 max-width（百分比可行，auto 无效）
  • word-break: break-word 已废弃，别再用
  • 不要对整页全局设 word-break: break-all：中文会被切成“北”“京”“市”，阅读体验崩坏

  lang 属性必须按内容粒度显式标注，否则折行逻辑失效

  同一页面里中、日、英、阿拉伯文混排时，仅靠根节点 完全不够。浏览器和屏幕阅读器依赖每个文本节点的 lang 值来决定字体回退、连字符规则、断行策略（比如阿拉伯语需 RTL 排版，日文需特定标点悬挂）。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载

  例如一段含英文术语的中文说明：<p>参见 RFC <span lang="en">9110</span></p>。若不给 <span></span> 标 lang="en"，浏览器可能用中文字体渲染数字“9110”，导致字形异常；更严重的是，CSS 的 :lang(en) 选择器无法生效，后续针对英文的 overflow-wrap 规则就挂了。

  关键细节：

  • lang 作用域是自身及所有子节点，不继承父级（除非父级未声明）
  • :lang(en) 能匹配继承来的语言值，比 [lang="en"] 更可靠
  • 代码块、引文、按钮文案等独立语言片段，必须各自标注，不能偷懒只靠根标签

  dir 属性与 text-align 的联动影响 RTL 语言折行起点

  阿拉伯语、希伯来语等从右向左书写的语言，不仅文字方向相反，连折行起点、缩进方向、标点悬挂位置都不同。仅设 lang="ar" 不够，必须同步加 dir="rtl"。

  dir="rtl" 会改变 text-align 的默认行为：未显式声明时，text-align 自动变为 right；同时影响 padding-start/padding-end 的物理位置（padding-start 落在右侧）。如果只改 lang 不改 dir，RTL 文本会从左往右挤，折行位置完全错乱。

  实操建议：

  • 对 <blockquote lang="ar"></blockquote> 这类元素，必须写成 <blockquote lang="ar" dir="rtl"></blockquote>
  • 避免混合使用 padding-left/padding-right：优先用 padding-inline-start/padding-inline-end（现代写法）或 padding-start/padding-end（兼容写法）
  • 调试时打开浏览器开发者工具，检查 computed direction 是否为 rtl，再看折行是否从右边界开始
  复杂点在于：折行不是单一 CSS 属性能解决的事，它是 white-space、overflow-wrap、lang、dir 四者共同作用的结果。漏掉任意一环，多语言文本就会在某个环节“掉链子”。