直接加 white-space: pre-wrap 并配合 overflow-wrap: break-word 或 word-break: break-word 可解决 <code> 横向溢出问题；因其为内联元素，默认不换行且不继承 <pre> 样式，需通过父容器（如 <pre>）或强制 display: block 控制样式，并注意盒模型与响应式兜底。
直接加 white-space: pre-wrap 就能解决，但必须配合 overflow-wrap: break-word 或 word-break: break-word 处理无空格长串（比如 Base64、URL、哈希值），否则仍会横向溢出。
为什么 <code> 默认会横向溢出
<code> 是内联元素，浏览器默认按「不换行 + 保留空格」渲染；它本身不继承 pre 的样式，但开发者常把它和 <pre> 混用，误以为自带折行逻辑。实际它只是语义化标记，样式完全依赖 CSS 控制。
- 单独设
white-space: pre-wrap可保留缩进与换行，并允许折行——但对连续无空格字符串（如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...）无效 - 漏掉
overflow-wrap: break-word时，长单词/长 URL 仍会撑开容器 - 不要用
white-space: normal，它会抹掉所有缩进和空格，破坏代码可读性
<code> 必须包裹在块级容器里才有效
<code> 自身是内联元素，width、overflow、white-space 等属性对它直接生效有限。正确做法是给它的父容器（比如 <div> 或 <pre>）设样式，而不是只盯住 <code> 标签本身。
- 推荐结构：
<pre><code>...</code></pre>，然后对pre设样式 - 如果只能用纯
<code>（如 Markdown 渲染器限制），需强制转为块级：code { display: block; white-space: pre-wrap; overflow-wrap: break-word; } - 别忘了限制父容器宽度，否则
pre-wrap无边界可依，不会主动折行
响应式场景下要防死锁：max-width + overflow-x
移动端或窄屏中，即使加了折行，某些超长 token（如路径 /api/v1/transactions/8a7b6c5d4e3f2a1b0c9d8e7f6a5b4c3d2）仍可能单行过宽，导致容器被撑开或出现水平滚动条。这时需要兜底策略：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器加
max-width: 100%和overflow-x: auto，允许横向滚动而非破坏布局 - 避免同时设
overflow: hidden和white-space: pre-wrap——前者会裁掉折行后多出的行，后者又依赖空间换行，冲突 - 若用
word-break: break-all，注意它会劈开任意单词（包括变量名userProfileData→userProfi…），语义受损，仅作最后手段
最易被忽略的一点：很多人给 code 加样式却忘了它常嵌套在 p 或 li 里，而这些父元素可能有 margin、padding 或 line-height 干扰高度计算，导致折行位置偏移或底部留白异常。检查时优先看紧邻父容器的盒模型，而不是一上来就调 code 本身。
