Html 如何在 pre 标签中包装文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/248011/
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
How do I wrap text in a pre tag?
提问by adambox
pretags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how do I make the text word-wrap instead of printing out one long line?
pre标签对于 HTML 中的代码块和在编写脚本时调试输出非常有用，但是如何使文本自动换行而不是打印出一长行？
回答by adambox
回答by Richard McKechnie
This works great to wrap text and maintain white-space within the pre-tag:
这非常适用于包装文本并在pre-tag 中保持空白：
pre {
white-space: pre-wrap;
}
回答by Mason240
I've found that skipping the pre tag and using white-space: pre-wrap on a div is a better solution.
我发现跳过 pre 标签并使用 white-space: pre-wrap 在 div 上是一个更好的解决方案。
<div style="white-space: pre-wrap;">content</div>
回答by Erin Delacroix
回答by user1433454
This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.
这就是我所需要的。它可以防止单词中断，但允许预区域中的动态宽度。
word-break: keep-all;
回答by ekerner
I suggest forget the pre and just put it in a textarea.
我建议忘记 pre 并将其放在 textarea 中。
Your indenting will remain and your code wont get word-wrapped in the middle of a path or something.
您的缩进将保留，并且您的代码不会在路径或其他东西的中间被自动换行。
Easier to select text range in a text area too if you want to copy to clipboard.
如果您想复制到剪贴板，也可以更轻松地在文本区域中选择文本范围。
The following is a php excerpt so if your not in php then the way you pack the html special chars will vary.
以下是 php 摘录，因此如果您不在 php 中，那么您打包 html 特殊字符的方式会有所不同。
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
For info on how to copy text to the clipboard in js see: How do I copy to the clipboard in JavaScript?.
有关如何在 js 中将文本复制到剪贴板的信息，请参阅：如何在 JavaScript 中复制到剪贴板？.
However...
然而...
I just inspected the stackoverflow code blocks and they wrap in a <code> tag wrapped in <pre> tag with css ...
我刚刚检查了 stackoverflow 代码块，它们用 css 包裹在 <pre> 标签中的 <code> 标签中......
code {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
Also the content of the stackoverflow code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/.
stackoverflow 代码块的内容也是使用（我认为）http://code.google.com/p/google-code-prettify/突出显示的语法。
Its a nice setup but Im just going with textareas for now.
这是一个不错的设置，但我现在只使用 textareas。
回答by vovahost
I combined @richelectron and @user1433454 answers.
It works very well and preserves the text formatting.
我结合了@richelectron 和@user1433454 的答案。
它工作得很好并保留了文本格式。
<pre style="white-space: pre-wrap; word-break: keep-all;">
</pre>
回答by Bobby Hyman
You can either:
您可以：
pre { white-space: normal; }
to maintain the monospace font but add word-wrap, or:
保持等宽字体但添加自动换行，或：
pre { overflow: auto; }
which will allow a fixed size with horizontal scrolling for long lines.
这将允许固定大小并为长线水平滚动。
回答by Eduardo Campa?ó
Try using
尝试使用
<pre style="white-space:normal;">.
Or better throw CSS.
或者更好地抛出 CSS。
回答by FryingggPannn
Use white-space: pre-wrapand some prefixes for automatic line breaking inside pres.
使用white-space: pre-wrap和 一些前缀用于在pres内自动换行。
Do not use word-wrap: break-wordbecause this just, of course, breaks a word in half which is probably something you do not want.
不要使用，word-wrap: break-word因为这当然只是将单词分成两半，这可能是您不想要的。
