無法輸入水平html滾動框的長行文字

Question

我想在自己的博客上有一個滾動框，以便我可以爲我的讀者顯示代碼。但是，實際上在開始和結束「div」之間粘貼代碼時，實際編寫代碼內容的輸入區域的文本換行意味着我無法輸入足夠長的文本行，以至於水平滾動條將被實際使用。當帖子發佈時，文字包裝會隱藏代碼行。應該像這樣

<div style="width:500px;height:300px;overflow:scroll; 
border-width:2px;border-color:000000;border-style:solid;"> 
12345678910111213141516171819202122232425262728299999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 
</div> 

滾動條環繞文字產生像這樣（沒有水平滾動）

<div style="width:500px;height:300px;overflow:scroll; 
border-width:2px;border-color:000000;border-style:solid;"> 
123456789101 
112131415161718192021222324252 
6272829999999999999999999999999999999999999999999999999 
9999999999999999999999999999999999999999999999999999999 
999999 
</div> 

Answer 1

這可以用CSS來實現，但語義你使用的是錯誤的代碼框的元素。您應該使用<pre>而不是<div>，並且會自動整理包裝。那麼你應該在<code>標籤中包裝代碼。活生生的例子：http://jsfiddle.net/ddEPB/2/

<pre style="width:500px;height:300px;overflow:auto;border-width:2px;border-color:000000;border-style:solid;"> 
<code>12345678910111213141516171819202122232425262728299999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999</code> 
</pre> 

我也改成了overflow:auto，以便在需要時滾動條纔會出現。