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

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;
}

..does是你在火狐和Chrome浏览器中想要的--换行但保留空白。但不幸的是，IE似乎并不支持它(尽管我还没有研究过IE8 )。

编辑: IE8 supports it。

Answer 3

如果在执行了Karim所说的操作之后，仍将空间分配到块的右侧，那么您可能已将其封闭在内部。

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

在这种情况下，请替换为其他标记，如div或段落