<pre> HTML 中固定宽度的标签

Question

我使用

<pre>

标签来显示预格式化文本（包括换行符、空格和制表符等），但是没有换行符的大行显示在一行中，并添加了滚动条。

我想限制

<pre>

标签的宽度（这样大行就会被分解成新行，并且不需要滚动。这可能吗？还是有其他我可以使用的标签？

代码类似于：

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

Answer 1

在几乎所有浏览器中支持它的详尽方法，逐字复制于 Willy Duitt 2004 年在 CodingForums.com 上的帖子：

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+ */
}

Answer 2

pre{
    white-space:pre-wrap;
}

..在 Firefox 和 Chrome 中执行您想要的操作 - 换行但保留空格。但不幸的是 IE 似乎不支持它（虽然我还没有在 IE8 中查看过）。

编辑：IE8 支持。

Answer 3

即使按照 Karim 所说的操作，空间仍被分配到块的右侧 那么也许你已经把它封闭在里面了。

Table 标签为整个 pre 字符串分配空间，即使内容可能是自动换行的，这会导致 pre 块右侧出现空白区域

在这种情况下，请替换为其他标签，例如 div 或 paragraph