如何使 Twitter Bootstrap 的 <pre> 块水平滚动？

Posted 2023-02-22

【中文标题】如何使 Twitter Bootstrap 的 <pre> 块水平滚动？

【英文标题】：How to make Twitter Bootstrap's <pre> blocks scroll horizontally?

【发布时间】：2012-05-09 14:11:20

【问题描述】：

根据 https://getbootstrap.com/docs/4.3/content/code/#code-blocks 的示例，bootstrap 仅支持开箱即用的垂直可滚动和自动换行的 <pre> 块。如何使我拥有可水平滚动的未包装代码块？

【参考方案1】：

诀窍在于，引导程序同时覆盖<pre> 元素的white-space 和CSS3 word-wrap 属性。要实现水平滚动，请确保您的 CSS 中有以下内容：

pre 
  overflow: auto;
  word-wrap: normal;
  white-space: pre;

【讨论】：

我不建议覆盖引导类。相反，我会创建一个名为 eg 的新 CSS 文件。 bootstrap-extras.css 并定义一个新类，例如。 pre-x-scrollable （类似于它们的 pre-scrollable ）应用您的上述行为。这样，当您将来从源代码升级引导程序时，您就不会遇到冲突的类。

对于 bootstrap3：pre code 并删除 overflow:auto

请注意，word-wrap 在 CSS3 中是 changing 到 overflow-wrap。

设置 white-space: pre-wrap 是我让 pre 块根据需要实际包装的技巧

【参考方案2】：

这对我有用：

pre 
    overflow-x: auto;

pre code 
    overflow-wrap: normal;
    white-space: pre;

【讨论】：

overflow-wrap 仍然有 spotty implementation。现在，您应该使用所有浏览器都支持的旧版word-wrap。

@KyleMit 现在，您应该同时使用两者。然后，当overflow-wrap 开始获得支持时，您将不必返回并更新所有 CSS。

【参考方案3】：

当我开始新项目并且必须通读 cmets 以记住，哦，是的，不要覆盖引导类并且不要忘记溢出包装等时，我会不断地回到这个答案......

所以你有股票pre-scrollable，它只能垂直滚动，你可能还想要：

仅水平滚动

.pre-x-scrollable 
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;

垂直和水平滚动

.pre-xy-scrollable 
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
    max-height: 340px;

【参考方案4】：

较新版本的 Bootstrap 将样式应用于包装单词的 pre 和 code。将此添加到我的样式表为我解决了这个问题：

pre code 
        white-space: pre;
        word-wrap: normal;