highlight.js 默认不处理超长代码行的换行，导致内容溢出容器破坏页面布局；通过为 `
` 元素添加兼容性良好的 css 换行规则（如 `white-space: pre-wrap` 和 `word-wrap: break-word`），可强制长行自动折行，保持排版整洁。</p><p>在使用 Highlight.js 渲染代码块时，其默认将代码包裹在 <pre class="brush:php;toolbar:false;"><code>...</code>结构中。由于
元素天然保留空白符且<strong>默认禁止自动换行</strong>（white-space: pre），当遇到无空格的超长字符串（如 Base64 数据、长 URL、连续字母变量名或未格式化的 JSON）时，浏览器无法断行，导致代码横向溢出容器，破坏整体响应式布局——这正是你在 <a href="https://www.php.cn/link/1d87fb03475c5f052588cd435b46656d" rel="nofollow" target="_blank" >FarsLearn 示例页面</a> 中观察到的问题。</p><p>✅ 正确解决方案是覆盖 <pre class="brush:php;toolbar:false;"> 的默认换行行为，启用智能折行。推荐使用以下具有广泛浏览器兼容性的 CSS 规则：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9881" title="Json Repair Kit"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Json Repair Kit" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9881" title="Json Repair Kit">Json Repair Kit</a>
<p>使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。</p>
</div>
<a href="/xiazai/skill9881" title="Json Repair Kit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class="brush:php;toolbar:false;">pre {
white-space: pre-wrap; /* CSS 2.1 标准：保留空格与换行，允许折行 */
white-space: -moz-pre-wrap; /* Firefox 早期版本 */
white-space: -webkit-pre-wrap; /* Safari < 13（可选补充） */
white-space: -o-pre-wrap; /* Opera 7–12 */
word-wrap: break-word; /* IE 5.5+ / Edge Legacy：强制打断过长单词 */
word-break: break-word; /* 现代标准补充（Chrome/Firefox/Safari/Edge） */
}
⚠️ 注意事项：
- white-space: pre-line 虽简洁，但会合并多余空白符，可能破坏代码缩进和格式，不推荐用于代码高亮场景；
- overflow-x: auto（添加滚动条）是备选方案，但牺牲可读性与移动端体验，应优先采用折行；
- 若项目已使用 CSS 预处理器（如 Sass），建议将该样式封装为 @mixin code-wrap 复用；
- 对于
内联代码，无需额外设置（因其默认为 white-space: normal），本规则仅需作用于 <pre class="brush:php;toolbar:false;"> 容器。</pre>
添加上述 CSS 后，所有 Highlight.js 渲染的代码块将自动在容器边界处合理折行，既保持语法高亮完整性，又确保响应式友好——正如你在 Free Download Package 页面 中看到的正常效果。
