HTML code标签文本自动换行的设置方法-html教程-PHP中文网

标签默认不换行是w3c规定的语义行为，因其ua样式含white-space: nowrap或pre；需显式设white-space: pre-wrap、max-width及overflow-wrap: break-word才可换行。

html code标签文本自动换行的设置方法

<code> 标签默认不换行，哪怕内容超宽也会横向溢出——这不是 bug，是 W3C 明确规定的语义行为：它代表“一段不可分割的代码片段”，浏览器会优先保其完整性，而非适配容器。

为什么 `<code>` 默认不换行

根本原因是 <code> 的 UA 样式（用户代理默认样式）通常包含 white-space: nowrap 或 white-space: pre。这两个值都会禁用自动换行逻辑：
• white-space: nowrap 合并空格但禁止折行
• white-space: pre 保留所有空白和换行，也不允许在容器边界处折行
所以即使你写了 overflow-wrap: break-word，它也完全不生效。

让 `<code>` 支持自动换行的正确写法

必须显式覆盖默认的 white-space，再配合宽度约束和断词策略：

先设 white-space: pre-wrap：保留原始缩进、空格和换行符，同时允许在容器右边界自动折行
必须加 width 或 max-width：没有宽度限制，浏览器认为“永远够宽”，根本不触发换行计算
对长无空格串（如 Base64、URL、哈希）加 overflow-wrap: break-word；若需更强控制，可补 word-break: break-all（仅限技术字符串场景）
如果 <code> 在 display: flex 容器里，记得给它自己加 min-width: 0，否则 flex 子项的默认 min-width: auto 会锁死收缩

示例：

Article To Html

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

下载

<code style="white-space: pre-wrap; max-width: 100%; overflow-wrap: break-word; min-width: 0;">const longVariableName = 'https://example.com/very/long/path/without/spaces/or/linebreaks';</code>

常见失效原因与排查顺序

写了样式却还是不换行？按这个顺序查：

打开开发者工具 → Elements → Computed 面板，搜 white-space，确认最终值不是 nowrap 或 pre
检查父级是否用了 display: flex 或 display: grid，如果是，确认 <code> 自身有 min-width: 0
确认容器或祖先元素没设 width: fit-content、width: max-content 或 display: inline —— 这些会让 <code> 拒绝收缩
移动端 Safari 旧版（iOS 14.4 及更早）不支持 overflow-wrap，得双写：word-wrap: break-word + overflow-wrap: break-word

别踩这些坑

<code> 不是普通文本容器，它的换行必须兼顾“可读性”和“语义准确性”：

不要用 white-space: normal：它会把缩进、多空格、制表符全合并成单空格，破坏代码结构
避免 word-break: break-all 和中文混用：比如 console.log(用户信息) 可能被切成 consol + e.log(用户 + 信息)，完全不可读
textarea 里的 <code> 不受这些 CSS 控制：它走的是原生控件渲染路径，换行靠 wrap="soft" 和浏览器默认行为，CSS 仅影响外观尺寸
服务端返回的带 \n 的代码片段，必须用 white-space: pre-wrap 才能同时保留换行和折行；pre-line 会丢掉缩进，normal 会丢掉所有换行