如何解决 Highlight.js 中长代码行溢出页面的问题

花韻仙語

发布时间：2026-02-03 14:29:32

476人浏览过

来源于php中文网

原创

如何解决 Highlight.js 中长代码行溢出页面的问题

highlight.js 默认不处理超长代码行的换行，导致内容溢出容器破坏页面布局；通过为 `

` 元素添加兼容性良好的 css 换行规则（如 `white-space: pre-wrap` 和 `word-wrap: break-word`），可强制长行自动折行，保持排版整洁。

在使用 Highlight.js 渲染代码块时，其默认将代码包裹在

...

结构中。由于

元素天然保留空白符且默认禁止自动换行（white-space: pre），当遇到无空格的超长字符串（如 Base64 数据、长 URL、连续字母变量名或未格式化的 JSON）时，浏览器无法断行，导致代码横向溢出容器，破坏整体响应式布局——这正是你在 FarsLearn 示例页面中观察到的问题。

✅ 正确解决方案是覆盖

的默认换行行为，启用智能折行。推荐使用以下具有广泛浏览器兼容性的 CSS 规则：

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） */
}

⚠️ 注意事项：

Kotlin Android 中文开发帮助文档 PDF版

这本书并不是一本语言参考书，但它是一个Android开发者去学习Kotlin并且使用在自己项目中的一个工具。我会通过使用一些语言特性和有趣的工具和库来解决很多我们在日常生活当中都会遇到的典型问题。这本书是非常具有实践性的，所以我建议你在电脑面前跟着我的例子和代码实践。无论何时你都可以在有一些想法的时候深入到实践中去。这本书适合你吗？写这本书是为了帮助那些有兴趣使用Kotlin语言来进行开发的Android开发者。如果你符合下面这些情况，那这本书是适合你的：你有相关Android开发和Andro

下载

white-space: pre-line 虽简洁，但会合并多余空白符，可能破坏代码缩进和格式，不推荐用于代码高亮场景；
overflow-x: auto（添加滚动条）是备选方案，但牺牲可读性与移动端体验，应优先采用折行；
若项目已使用 CSS 预处理器（如 Sass），建议将该样式封装为 @mixin code-wrap 复用；
对于 内联代码，无需额外设置（因其默认为 white-space: normal），本规则仅需作用于容器。

添加上述 CSS 后，所有 Highlight.js 渲染的代码块将自动在容器边界处合理折行，既保持语法高亮完整性，又确保响应式友好——正如你在 Free Download Package 页面中看到的正常效果。

如何用 CSS 3D 立方体结构实现稳定旋转的曲线边框动画

如何用 CSS 3D 技术实现旋转过程中不消失的稳定线条动画

如何在悬停导航栏时动态改变覆盖层字体颜色并调整位置

如何修复多级下拉菜单中 CSS hover 不生效的问题

如何使用 CSS 伪元素在指定元素前后添加文本

相关标签:

css word js json 处理器浏览器 edge safari 响应式布局 overflow sass 封装 auto 预处理器 JS overflow

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何让导航栏使用 position: sticky 实现吸顶效果？下一篇：暂无

作者最新文章

如何在 Qdrant 中安全地向已有图像集合追加新数据（而非覆盖重建）

2026-02-01 16:26

JavaScript 多条件动态过滤：实现国家与作物的独立/组合筛选

2026-02-01 16:27

如何在 Go 中获取 Windows 系统已安装服务列表

2026-02-01 16:29

Vaadin 23.3.5 路由 404 问题的根源与修复方案

2026-02-01 16:36

JavaScript 中模板字符串插值会强制转换为字符串类型的原因详解

2026-02-01 16:42

Go Web 开发中使用 entr 实时重启服务时端口被占用的解决方案

2026-02-01 16:50

如何使用数字输入框动态构建订单商品数组

2026-02-01 16:52

如何在 Matplotlib 中实现单图实时更新而非重复创建新窗口

2026-02-01 17:17

Python 属性命名中下划线前缀的正确用法与设计意图

2026-02-01 17:31

如何将一维用户数组结构化为嵌套的多维配置数组

2026-02-01 17:43

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

Sass和less的区别

Sass和less的区别有语法差异、变量和混合器的定义方式、导入方式、运算符的支持、扩展性等。本专题为大家提供Sass和less相关的文章、下载、课程内容，供大家免费下载体验。

207

2023.10.12

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

516

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

287

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

361

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5403

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

483

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

213

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

219

2023.09.14