code标签需显式设置white-space: pre-wrap和overflow-wrap: break-word以支持换行与折行，中英文混排时叠加word-break: keep-all；lang属性须设于code内部以确保正确断行与排版。

code 标签默认不支持多语言折行，必须手动干预

code 是内联元素，浏览器对其默认应用 white-space: normal，这意味着它会把所有换行符、连续空格压缩成单个空格——你写的 \n 在 code 里照样消失。更关键的是，code 不自动继承父容器的 white-space 设置，哪怕外层 div 设了 pre-wrap，里面的 code 仍按默认行为处理。

常见错误现象：

• API 返回带 \n 的日志片段，套进 <code>... 后变成一行挤满容器，横向溢出
• 中英文混排的命令行示例（如 curl -X POST https://api.example.com/v1/users?lang=zh-CN）在窄屏上不断字，撑宽整个卡片

实操建议：

• 显式给 code 加样式：white-space: pre-wrap（保留换行 + 允许折行）
• 必须配合 overflow-wrap: break-word，否则长 URL 或无空格英文串不会断行
• 避免用 word-break: break-all：中文会被切成“命”“令”“行”，语义断裂

中英文混排时，code 标签需叠加 word-break: keep-all

纯中文在 code 里不会被断开，但英文单词、URL、邮箱等有自然词界的内容，一旦超宽就依赖 overflow-wrap；而中文本身又不能被 break-word 切开——这是两个矛盾需求。

解决方案是组合使用：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• overflow-wrap: break-word：只在整词超宽时才断，保全英文语义
• word-break: keep-all：禁止中文在字中间断开，防止“代 码”变成“代
  码”
• 二者共存有效，且优先级互不冲突

注意：word-break: break-word 已废弃，别用；break-all 会破坏中文阅读，慎用。

lang 属性必须落到 code 标签内部，不能只靠 html 根节点

浏览器对 code 内容的断行逻辑（比如连字符位置、标点悬挂、RTL 排版）取决于其实际语言，而非页面全局的 。如果 code 里混着日文错误信息、阿拉伯路径、英文堆栈，只设根节点 lang，浏览器会统一按中文规则处理，导致日文标点错位、阿拉伯路径反向异常。

实操建议：

• 动态内容场景下，为每个 code 显式标注：<code lang="ja">エラーが発生しました
• 服务端渲染或模板引擎中，根据原始字符串的语言来源注入 lang 值
• 不要依赖 meta http-equiv="Content-Language"：已废弃，不起作用

code 标签里的实体编码必须严格，尤其含 & 和

code 常用于展示代码、命令、XML 片段，里面高频出现 &、、<code>>。如果直接写 <div>&id=123，浏览器会把 <code> 解析为标签开始，<code>& 解析为实体起始，结果 DOM 结构错乱，甚至 XSS 风险。

必须转义的 5 个字符：

• → <code><
• > → >
• & → &
• " → "（若属性值用双引号包裹）
• ' → '（若属性值用单引号包裹，老 IE 不支持，稳妥起见改用双引号）

特别注意：用户输入或 API 返回的原始字符串，不能直接 innerHTML 到 code 里；必须先做 HTML 实体转义，再插入。