如何在StackOverflow中实现代码显示样式？

Question

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

我有一行代码（很长一段时间显示在一行），就像在上面一行显示在网页上一样。

我不把它分成两行。

我可以仅使用css完成此操作吗？

Answer 1

如果您使用在overflow:auto之间使用空格的单词时实际发生这种情况是不够的，那么您还需要text-overflow: nowrap。

http://jsfiddle.net/kZV3j/

Answer 2

以下是SO代码块的外观：

<pre>
  <code>
    <span>...</span>
  </code>
</pre>

CSS：

pre {
  overflow: auto;
}

演示：http://jsfiddle.net/TfeLm/

Answer 3

我认为你正在寻找overflow:auto：

<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Answer 4

创建一个包含元素（例如div），然后在其上设置一些定义宽度的基本CSS属性，并处理溢出。像这样：

HTML

<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>​

CSS：

.short {
    width:400px;
    padding: 10px;
    overflow-x:scroll;
}​

<强> jsFiddle example 即可。适用于所有现代浏览器和IE8。

Answer 5

我认为您正在寻找具有auto值的overflow属性：

<style>pre { width: 200px; overflow: auto; }</style>
<pre><code>&lt;p&gt;Some tooooo long text on one line&lt;/&gt;</code></pre>

实例：http://jsbin.com/uhuveg/

Answer 6

我相信您应该使用以下CSS

#id {
    width: 400px;
    padding: 5px;
    background: #C3C3C3;
    overflow-x: scroll
}​

直播example