Question

我希望在预标记内的代码标记内放置文本的滚动效果（从左到右）。我已经尝试了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*/
}

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

1 个答案: