HTML 水平滚动代码元素上的溢出文本

Question

我希望对放置在 pre 标签内的代码标签内的文本有滚动效果（从左到右）。我已经尝试了该overflow: scroll属性但没有成功。一个例子是这样的：

<pre><code>
    var text = 'This is a bit of longer text that ends up wrapping around and messing up the rest of the formatting.';
    var object {
        text: text,
        key: 'A second key with some more really long text that will overflow onto the next line',
    }
</code></pre>

我需要为我的代码元素提供什么样式以允许文本换行而不影响代码的格式？具有讽刺意味的是，堆栈溢出中的代码具有我正在寻找的效果，尽管我似乎无法复制它。

*我已经更新了问题，添加了代码位于保留换行符和格式的预标记中。

Answer 1

这是一个关于如何做到这一点的简单而好的例子！

HTML

<div class="code-holder">
  <code>
    ar text = 'This is a bit of longer text that ends up wrapping around and 
     messing up the rest of the formatting.';
  </code>
</div>

CSS

.code-holder{
  width: 560px; /* your prefered width */
  overflow-x: scroll;
  height: 60px;/* Your prfered height*/
}

.code-holder code{
 white-space: nowrap; /* this rule is important*/
}