css - 很难让 pre 和 code 标签滚动而不是换行

Question

My website是使用我自己创建的静态站点生成器构建的，并使用 Bootstrap 进行布局。我正在使用 Highlight.js 进行语法高亮显示(作为构建过程的一部分在服务器端运行)并且它运行良好。然而，有一件事难倒了我。

我希望代码标签在一行太宽时滚动，而不是换行到下一行。通常，我相信这通常可以通过设置 <pre> 的样式来完成。带有 white-space: nowrap 的标签，但这在这里不起作用，我尝试过的所有方法要么无效，要么只是将所有内容推向左侧。

其他人能看出问题所在吗？

Answer 1

偶然发现答案 here最后:

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