<pre> тег в HTML с фиксированной шириной

Question

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

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

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

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

Answer 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

Answer 2

pre{
    white-space:pre-wrap;
}

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

Редактировать: IE8 поддерживает его .

Answer 3

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

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

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