html - 如何让 Twitter Bootstrap 的 <pre> block 水平滚动？

Question

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

Answer 1

诀窍是 Bootstrap 会覆盖两者 white-space和 CSS3 word-wrap <pre> 的属性元素。要实现水平滚动，请确保 CSS 中包含以下内容:

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