在代码元素上的溢出文本上​​进行HTML水平滚动 [英] HTML Horizontal Scrolling On Overflow Text On Code Element

问题描述

我希望在pre标签内的代码标签内的文本上产生滚动效果(从左到右).我尝试了 overflow:scroll 属性，但没有成功.一个例子是这样的:

I'm looking to have a scroll effect (left to right) on text placed inside code tags within a pre tag. I've tried the overflow: scroll attribute without success. An example is this:

<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>

我需要为代码元素赋予什么样式以允许文本换行而不影响代码的格式?具有讽刺意味的是，虽然我似乎无法复制它，但堆栈溢出中的代码却具有我正在寻找的效果.

What style do I need to give to my code element to allow the text to wrap without effecting the formatting of the code? Ironically code in stack overflow has the effect I'm looking for though I can't seem to replicate it.

*我已经更新了问题，以添加代码在pre标签中，该标签保留换行符和格式.

*I've updated the question to add that the code is in a pre tag which preserves line breaks and formatting.

推荐答案

这是一个简单而有效的示例！

Here is a simple and good example on how to do it !

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水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！