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

根据http://twitter.github.com/bootstrap/base-css.html#code示例，bootstrap仅支持垂直滚动和字符包装的<pre>块。 我如何使它成为水平滚动的，展开的代码块呢？

Answer 1

诀窍是bootstrap覆盖了<pre>元素white-space和CSS3 word-wrap属性。 要实现水平滚动，请确保在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; }