解决HTML code标签在移动端溢出容器的方法-html教程-PHP中文网

code 标签默认不换行，需用 white-space: pre-wrap + overflow-wrap: break-word + display: inline-block/block + max-width: 100% 实现安全折行；嵌套 pre 时须重置其 white-space；ios safari 旧版本需降级处理。

解决html code标签在移动端溢出容器的方法

code 标签默认不换行，移动端横向滚动是常态

code 是内联元素，浏览器默认禁用换行（white-space: pre 或 pre-wrap 行为），长代码如 https://api.example.com/v2/users?include=profile,permissions&limit=100 会直接撑破容器，尤其在小屏上触发横向滚动。这不是 bug，是规范行为——它本就该保留空格与换行语义。

让 code 内容自动折行，但不破坏语义

不能简单加 white-space: normal，否则缩进、多空格、换行符全丢失；也不能只靠 overflow-x: auto，那只是把问题甩给用户拖拽。正确做法是启用“安全折行”：

html-ppt-to-pdf

将使用 `

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

下载

给 code 加 white-space: pre-wrap：保留原始空格/换行，同时允许在空格、连字符、斜杠（/）、点号（.）等处折行
必须配合 word-break: break-word 或更现代的 overflow-wrap: break-word，对无空格长串（如 Base64 片段、哈希值）生效
设 display: inline-block 或 display: block，否则 max-width 和 overflow-wrap 在部分 iOS Safari 中不触发
加 max-width: 100%，防止父容器未设宽时无限扩展

嵌套在 `pre` 里的 code 怎么处理

常见写法是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，这时样式优先级和继承容易出错：

pre 默认有 white-space: pre，会覆盖 code 的 pre-wrap —— 必须显式重置：pre { white-space: pre-wrap; }
pre 通常带大块 margin 和 padding，移动端易撑开布局，建议统一用 pre { margin: 0; padding: 0.5em; }
若需单行截断（如日志行首），不要直接在 pre 或 code 上用 text-overflow: ellipsis —— 它要求 white-space: nowrap，与折行需求冲突；应改用 JS 截取 + tooltip，或服务端预处理