解决HTML code标签不换行问题的方法-html教程-PHP中文网

code标签天生不换行、不保留缩进，因其语义定位为单行内联代码片段；多行代码必须嵌套使用pre和code，前者保留格式，后者确保语义正确。

解决html code标签不换行问题的方法

code 标签天生不换行、不保留缩进和空格，这不是 bug，是它的语义定位决定的：它只用于标记**单行内联代码片段**，比如 console.log 或 let x = 1。想让它显示多行内容并保持格式，直接加 white-space: pre 或写换行符都没用——浏览器会照常把换行压成空格。

为什么`code`里敲回车还是变成一行

code 是行内元素，浏览器默认合并所有空白字符（包括换行符、制表符、连续空格），这是 HTML 渲染层的底层行为。哪怕你在源码里写成：

<code>
function foo() {
  return true;
}</code>

实际渲染出来就是：function foo() { return true; }

html-ppt-to-pdf

将使用 `

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

下载

这不是 VS Code 或编辑器的问题，是所有浏览器统一行为
white-space: pre 对单独 code 无效，因为 display 没变，仍受行内元素空白处理规则约束
试图用 <br> 或强插换行，会破坏语义且不可维护

正确做法：必须用

 组合

多行代码唯一合规方案是嵌套使用 pre 和 code：

<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="js">function foo() {
  return true;
}</code>

pre 负责保留原始换行与空格（等效于 <code>white-space: pre）
code 负责声明这段内容是计算机代码（语义正确，利于 SEO 和无障碍）
二者缺一不可：只用 pre 缺少语义；只用 code 不保留格式
若需语法高亮，类名如 language-js 可被 Prism.js 或 Highlight.js 识别

常见错误配置与兼容性注意点

即使用了 precode，也可能出问题：

pre 默认用等宽字体且无 margin，若要融入正文排版，需重置：pre { font-family: inherit; margin: 0.5em 0; }
某些 CSS 重置库（如 Normalize.css）会设 pre { white-space: pre-wrap; }，这虽允许长单词折行，但可能意外破坏代码对齐——确认是否真需要
移动端小屏下，pre 容易横向溢出，应加 overflow-x: auto 和 max-width: 100%
用户提交的代码含未转义的 、<code>>，直接插入会解析为标签——务必服务端或 JS 层先做 HTML 实体转义（<、>）