在使用Highlight.js进行代码高亮展示时，长代码行超出容器宽度导致页面横向滚动是开发者经常遇到的问题，这种情况会破坏页面布局，降低用户的阅读体验。要解决这个问题，我们可以从样式调整、配置优化等多个维度入手。
问题产生的原因
Highlight.js默认生成的代码块不会自动换行，当单行代码的长度超过外层容器的宽度时，就会出现溢出的情况。另外如果外层容器没有设置合适的溢出处理规则，也会导致整个页面被撑开。
解决方案一：通过CSS样式实现自动换行
这是最直接有效的解决方式，我们只需要给Highlight.js生成的代码容器添加对应的CSS样式即可。Highlight.js高亮后的代码通常会被包裹在pre和code标签中，我们可以针对这两个标签设置样式。
/* 针对代码块的pre容器设置 */
pre.hljs {
padding: 12px;
border-radius: 6px;
/* 允许横向滚动，避免直接撑开页面 */
overflow-x: auto;
/* 设置最大宽度不超过父容器 */
max-width: 100%;
}
/* 针对code标签设置自动换行 */
pre.hljs code {
/* 保留空白符序列，但是正常换行 */
white-space: pre-wrap;
/* 在单词内换行，避免长单词溢出 */
word-wrap: break-word;
/* 长单词换行规则 */
word-break: break-all;
}
这里的white-space: pre-wrap可以保留代码原有的缩进和空格，同时允许内容自动换行；word-break: break-all则可以让长字符串在任意位置换行，避免因为连续无空格的长内容导致溢出。
解决方案二：限制代码容器的宽度
如果页面的布局有固定的内容区域，我们可以给代码块的外层容器设置明确的宽度限制，避免它超出布局范围。
/* 代码块外层容器样式 */
.code-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
/* 代码块继承容器宽度 */
.code-container pre.hljs {
width: 100%;
}
解决方案三：处理特殊场景的长代码
有些场景下代码包含很长的URL或者无空格的字符串，即使设置了上述样式也可能出现换行异常，这时候可以给这类特殊内容添加额外的处理样式。
/* 针对长URL或者无空格字符串的处理 */
pre.hljs code .long-content {
word-break: break-all;
word-wrap: break-word;
}
对应的HTML结构可以在生成代码的时候给特殊内容添加对应的类名：
<pre class="hljs">
<code>
请求地址：<span class="long-content">https://ipipp.com/api/v1/user/info?uid=123456789&token=abcdefghijklmnopqrstuvwxyz</span>
</code>
</pre>
验证方案效果
我们可以写一个简单的测试页面验证上述方案是否生效：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Highlight.js长代码测试</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css">
<style>
pre.hljs {
padding: 12px;
border-radius: 6px;
overflow-x: auto;
max-width: 100%;
}
pre.hljs code {
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
</style>
</head>
<body>
<pre class="hljs">
<code>
function testLongCodeLine() {
const longString = "这是一段非常长的字符串内容，用来测试Highlight.js的长代码行是否会溢出页面，如果样式设置正确，这段内容应该会自动换行展示，不会出现横向滚动条";
console.log(longString);
}
</code>
</pre>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>
打开这个页面后，如果长字符串自动换行，没有出现横向滚动条，就说明我们的解决方案生效了。
注意事项
- 不要同时设置
white-space: nowrap和自动换行的样式，这两个属性会互相冲突，导致换行失效。 - 如果页面使用了响应式布局，需要确保代码容器的宽度设置适配移动端，避免出现移动端下代码块超出屏幕的情况。
- 如果自定义了Highlight.js的主题，需要检查主题中是否已经设置了相关的溢出样式，避免我们的自定义样式被主题样式覆盖。
Highlight.js长代码行溢出代码换行前端样式white_space修改时间：2026-07-02 19:42:33