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

Question

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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

我不想被包裹成两行。

我只能使用 css 来完成这个吗？

score 4 · Accepted Answer

当您使用的单词之间有空格overflow:auto是不够的时，要真正做到这一点，您还需要text-overflow: nowrap.

score 3 · Accepted Answer

以下是 SO 的代码块的外观：

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

和CSS：

pre {
  overflow: auto;
}

score 1 · Accepted Answer

我想你正在寻找overflow:auto：

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

score 1 · Accepted Answer

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

HTML

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

CSS：

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

jsFiddle 示例。适用于所有现代浏览器和 IE8。

score 0 · Accepted Answer

我认为您正在寻找overflow具有auto价值的财产：

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

score 0 · Accepted Answer

我相信你应该使用下面的 CSS

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

看这个活生生的例子

6 回答 6