Невозможно ввести длинные строки текста для горизонтального 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 

Я также изменил его на overflow:auto, чтобы полосы прокрутки появлялись только при необходимости.