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 supports it。

Answer 3

如果在执行Karim所说的话之后，如果空间被分配到区块的右侧也许你已经封闭了内部。

表标记为整个前字符串分配空间，即使内容可能是自动换行的，也会导致前置块右侧出现空白区域

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

<pre> tag in HTML with fixed width</pre>

3 个答案: