使用Skeleton CSS时如何让<pre><code>元素可横向滚动且内容在边框盒内

实现方案 #

你只需在项目的自定义样式表中添加以下覆盖规则，即可实现和GitHub一致的代码块效果：

/* 覆盖Skeleton默认的pre标签样式 */
pre {
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
}

/* 适配code标签的排版规则 */
pre code {
  white-space: pre;
  word-wrap: normal;
  display: inline-block;
  min-width: 100%;
}

效果说明 #

• overflow-x: auto 会在代码长度超出容器宽度时自动显示横向滚动条，边框盒会始终完整包裹整个代码区域
• white-space: pre 和 word-wrap: normal 会强制代码不自动折行，完全保留原始换行和空格排版
• min-width: 100% 确保代码内容短于容器宽度时，代码块的背景和边框也能撑满整个容器宽度

原问题示例效果：

内容的提问来源于stack exchange，提问作者doppo