Не удается ввести длинные строки текста для горизонтальной рамки прокрутки html

Question

Я хочу, чтобы на моем блоге была прокрутка, чтобы я мог показывать код для своих читателей. Однако при фактическом вклеивании кода между открытием и окончанием «divs» текстовая упаковка области ввода, в которой вы фактически записываете содержимое кода, означает, что я не могу ввести строки текста, которые достаточно длинны, чтобы горизонтальная полоса прокрутки фактически будет вызван в использование. Текстовая упаковка связывает строки кода, когда публикация публикуется. Полоса прокрутки, который должен действовать как этот

<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 так, что полосы прокрутки появляются только тогда, когда это необходимо.