<pre class="prettyprint-override"> tag in HTML with fixed width

Я использую тег <pre> для отображения преформатированного текста (включая разрывы строк, пробелы и вкладки и т.д.). Но большие строки без разрывов строк показаны в одной строке и добавлена полоса прокрутки.

Я хочу ограничить ширину тега <pre> (так что большие строки разбиты, чтобы перейти к новым строкам и не требуется прокрутка. Возможно ли это или есть какой-то другой тег, который я могу использовать?

Код выглядит примерно так:

$.post("contr.php", q1, function(data) {
    $("#el_text").html("< pre>"+data+"< /pre>");
});

Ответ 1

Исчерпывающий способ поддержки почти во всех браузерах:

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

У меня была такая же проблема недавно, и я нашел решение здесь: http://codingforums.com/showthread.php?t=43293

Ответ 2

pre{
    white-space:pre-wrap;
}

.. делает то, что вы хотите в Firefox и Chrome, - обертывает строки, но сохраняет пробелы. Но, к сожалению, IE, похоже, не поддерживает его (хотя я еще не смотрел в IE8).

Изменить: IE8 поддерживает его.

Ответ 3

Если пространство выделяется справа от блока, даже после того, как Карим сказал Тогда, может быть, вы вложили внутрь.

Тег таблицы выделяет пространство для всей пре-строки, даже если содержимое может быть обернуто словами. Это приводит к пустым областям справа от предварительного блока.

В этом случае замените другим тегом, например div или paragraph