如何在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

回答