如何将文本包装到预标记中?

pre tags 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中的代码块和在编写脚本时调试输出非常有用，但是我如何使文本文字换行而不是打印一条长行呢?

12 个解决方案

#1

771

The answer, from this page in CSS:

答案来自CSS中的这个页面:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

#2

This works great to wrap text and maintain white-space within the pre-tag:

这很好地包装文本和保持空白在前标签:

pre{
    white-space: pre-wrap;
}

#3

I've found that skipping the pre tag and using white-space: pre-wrap on a div is a better solution.

我发现跳过预标记并使用空格:预包装div是更好的解决方案。

 <div style="white-space: pre-wrap;">content</div>

#4

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 * code blocks and they wrap in a <code> tag wrapped in <pre> tag with css ...

我刚刚检查了*代码块，它们封装在一个标签中，用css封装在

标签中……

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 * code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/ .

另外，*代码块的内容也是使用(我认为)使用的语法。

Its a nice setup but Im just going with textareas for now.

这是个不错的设置，但我现在只使用文本区域。

#5

This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.

这就是我所需要的。它避免了文字的断裂，但允许在前置区有动态宽度。

word-break: keep-all;

#6

You can either:

你可以:

pre { white-space: normal; }

to maintain the monospace font but add word-wrap, or:

维护monospace字体，但添加文字包装，或:

pre { overflow: auto; }

which will allow a fixed size with horizontal scrolling for long lines.

这将允许一个固定大小的水平滚动条长行。

#7

I combined @richelectron and @user1433454 answers.
It works very well and preserves the text formatting.

我结合了@ rich电子和@user1433454的答案。它工作得很好，保存了文本格式。

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

#8

Try this

试试这个

  pre {
        white-space: pre-wrap;       /* CSS 3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        padding:0px;
        margin:0px
    }

#9

Try using

试着用

<pre style="white-space:normal;">.

Or better throw CSS.

或更好的把CSS。

#10

The following helped me:

以下帮我:

pre {
    white-space: normal;
    word-wrap: break-word;
}

Thanks

谢谢

#11

The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)

最好的跨浏览器方式可以让我得到换行符，并显示准确的代码或文本(chrome、internet explorer、Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

#12

-3

The <pre>-Element stands for "pre-formatted-text" and is intended to keep the formatting of the text (or whatever) between its tags. Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the <pre>-Tag

元素

-Element代表“预格式文本”，其目的是在标记之间保持文本(或其他)的格式。因此，在-Tag中没有自动换行或换行

Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

元素中的文本显示为固定宽度的字体(通常是Courier字体)，它保留空格和换行符。

source: w3schools.com, emphasises made by myself.

来源:w3schools.com，强调我自己做的。

#1

771