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

Question

根据示例http://twitter.github.com/bootstrap/base-css.html#code,bootstrap仅支持<pre>开箱即用的可垂直滚动和自动换行的块.我如何制作它以便我可以使用水平可滚动的,未包装的代码块？

Answer 1

诀窍是,引导覆盖两者的white-space和CSS3 word-wrap的属性<pre>元素.要实现水平滚动,请确保CSS中有以下内容:

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

Answer 2

这对我有用:

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}

Answer 3

当我开始新的项目并且必须阅读评论以便记住时,我一直回到这个答案,哦,是的,不要覆盖引导类,不要忘记溢出包装等...

所以你有股票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;
}