<pre> 标签在 HTML 中固定宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1634203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<pre> tag in HTML with fixed width
提问by Edward Wong Hau Pepelu Tivrusk
I'm using the <pre>tag to display preformatted text (including line breaks, spaces and tabs etc.) But large lines without line-breaks are shown in one line and a scroll bar is added.
我使用<pre>标签来显示预先格式化的文本（包括换行符、空格和制表符等）但没有换行符的大行显示在一行中，并添加了一个滚动条。
I want to limit the width of the <pre>tag (such that large lines are broken up to come to new lines and no scroll is required. Is this possible or is there some other tag that I can use?
我想限制<pre>标签的宽度（这样大行被分解成新行并且不需要滚动。这可能还是有其他一些我可以使用的标签？
Code is something like:
代码是这样的：
$.post("contr.php", q1, function(data) {
$("#el_text").html("< pre>"+data+"< /pre>");
});
回答by Karim
An exhaustive way of supporting it in almost all browsers:
在几乎所有浏览器中支持它的详尽方式：
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+ */
}
I had the same problem not long ago and had found the solution here: http://codingforums.com/showthread.php?t=43293
不久前我遇到了同样的问题，并在这里找到了解决方案：http: //codingforums.com/showthread.php?t=43293
回答by Dan
pre{
white-space:pre-wrap;
}
..does what you want in Firefox and Chrome - wraps the lines but preserves whitespace. But unfortunately IE doesn't seem to support it (although I haven't looked in IE8 yet).
..在 Firefox 和 Chrome 中执行您想要的操作 - 包装行但保留空格。但不幸的是 IE 似乎并不支持它（虽然我还没有在 IE8 中查看）。
Edit: IE8 supports it.
编辑：IE8支持它。
回答by Jaison
If space is being allocated to the right of the block even after doing what Karim said Then maybe you have enclosed inside .
如果在执行 Karim 所说的之后，空间仍被分配到块的右侧，那么也许您已将其封闭在里面。
Table tag allocates space for the entire pre string even when the content may be word wrapped This leads to blank areas on right of pre block
即使内容可能被单词换行，表标记也会为整个 pre 字符串分配空间这导致 pre 块右侧的空白区域
In this case replace with some other tag, like div or paragraph
在这种情况下，替换为其他标签，例如 div 或段落
