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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

我有一行代码（这是很长时间才能显示在一行中）以一行显示在网页上，就像上面一样。如何在StackOverflow中实现代码显示样式？

我不就被包装成两行。

我能做到这一点只用CSS？

2012-04-10 Yishu Fang

http://code.google.com/p/google-code-prettify/ – David 2012-04-10 15:41:52

要真正使这个他们之间overflow:auto是不是当你在使用带有空格的话会发生够了，你还需要text-overflow: nowrap。

2012-04-10 15:48:57

这里是如此的代码块的样子：

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

而CSS：

pre { 
    overflow: auto; 
}

2012-04-10 15:42:02 Blender

溢出没有与指定将无法正常工作......（并且'span'不好） – 2012-04-10 15:46:04

我不敢苟同？在你的脑袋解析HTML和CSS之前，至少测试：http://jsfiddle.net/TfeLm/ – Blender 2012-04-10 15:50:22

你说得对。 pre元素有一个默认的'宽度：100％;'所以它的工作原理。 – 2012-04-10 15:53:00

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

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

2012-04-10 15:42:27 Travesty3

不使用内联CSS – 2012-04-10 15:45:24

使用内联CSS的Downvote？这是一个简单的例子。它工作正常。我并不是建议使用内联CSS对整个项目进行编码。 – Travesty3 2012-04-10 15:50:34

是的，快速示例或不避免使用内联CSS。答案需要出示做的一个很好的方式，而不是一个快速和肮脏的例子 – 2012-04-10 15:55:04

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

HTML

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

CSS：

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

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

2012-04-10 15:43:14 j08691

我认为你正在寻找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>

2012-04-10 15:44:05

您的示例不显示滚动条（至少不在Firefox中）。 – Travesty3 2012-04-10 15:52:58

它在IE中，所以我认为它适用于每个浏览器:)我认为这个问题是回答[由stephan muller]（http://stackoverflow.com/a/10092046/1149495） – 2012-04-10 15:57:47

我认为，你应该使用下面的CSS

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

看到这个现场example

2012-04-10 17:42:13 jacktheripper

回答