Html 如何让 Twitter Bootstrap 的 <pre> 块水平滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10374171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Twitter Bootstrap's <pre> blocks scroll horizontally?
提问by Suan
Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped <pre>blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?
根据示例https://getbootstrap.com/docs/4.3/content/code/#code-blocks，bootstrap 仅支持<pre>开箱即用的垂直滚动和自动换行块。我如何做到这一点，以便我拥有可水平滚动的、未包装的代码块？
回答by Suan
The trick is that bootstrap overrides boththe white-spaceand the CSS3 word-wrapattributes for the <pre>element. To achieve horizontal scrolling, ensure there's this in your CSS:
诀窍是，引导覆盖两者的white-space和CSS3word-wrap的属性<pre>元素。要实现水平滚动，请确保您的 CSS 中包含以下内容：
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
回答by Matt Morey
This worked for me:
这对我有用：
pre {
overflow-x: auto;
}
pre code {
overflow-wrap: normal;
white-space: pre;
}
回答by Rick Glos
I keep coming back to this answer when I start new projects and have to read through comments to remember, oh yea, don't override the bootstrap class and don't forget overflow-wrap, etc...
当我开始新项目并且必须通读评论以记住时，我不断回到这个答案，哦，是的，不要覆盖引导程序类，也不要忘记溢出包装等......
So you have the stock pre-scrollable, which is vertical only scrolling, you may also want:
因此，您拥有pre-scrollable仅垂直滚动的 stock ，您可能还需要：
Horizontal only scrolling
仅水平滚动
.pre-x-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
}
Vertical and Horizontal scrolling
垂直和水平滚动
.pre-xy-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
max-height: 340px;
}
回答by jarhill0
Newer versions of Bootstrap apply styles to both preand codethat wrap words. Adding this to my stylesheet fixed the issue for me:
较新版本的 Bootstrap 将样式应用于两者pre并code包装单词。将此添加到我的样式表中为我解决了这个问题：
pre code {
white-space: pre;
word-wrap: normal;
}
