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>

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

*我更新了问题以添加代码在保留换行符和格式的 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*/
}

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

HTML Horizontal Scrolling On Overflow Text On Code Element

html

word-wrap

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

HTML Horizontal Scrolling On Overflow Text On Code Element

html

word-wrap

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