如何在预标记中包装文本?

adambox 667 html css

pre 标签对于HTML中的代码块和编写脚本时的调试输出非常有用,但是如何使文本自动换行而不是打印出一条长行呢?

adambox.. 941

答案,从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+ */
}

  • `white-space:pre-line;`(和所有浏览器兼容的口味)在某些情况下似乎更合适(例如没有标签),因为它占用了行开头的空间(如果有的话) (5认同)
  • @MediaVince,`pre-line`折叠所有空格(不仅仅是在行的开头).https://developer.mozilla.org/en-US/docs/Web/CSS/white-space有一个表格,总结了`white-space`值的行为. (3认同)

小智.. 128

这非常适合在pre-tag中包装文本和维护空格:

pre{
    white-space: pre-wrap;
}

  • 这是因为它仅是CSS 3-有关更多兼容性,请参见adambox的[answer](http://stackoverflow.com/a/248013/221381)。 (3认同)

Mason240.. 57

我发现跳过pre标签并使用white-space:在div上预先包装是一个更好的解决方案.

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

  • 在我的情况下,我想显示预格式化的文本,其中包含制表符的选项卡.我用你的解决方案PLUS我添加了一个monspace字体,所以所有列都对齐了:`style ="white-space:pre-wrap; font-family:monospace;"` (4认同)
  • 比流行的答案更容易.谢谢! (3认同)
  • 我知道我迟到了这个游戏,但是为什么这个解决方案比在样式表中设置一次更好?我在一个HTML输出屏幕上需要多个div。似乎对样式表中的元素进行了一次修复即可解决所有问题。 (2认同)

小智.. 26

最简洁的是,这会强制内容包含在"pre"标签内而不会破坏单词.干杯!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

在这里查看实例.


小智.. 21

这就是我需要的.它保持单词不会破坏,但允许前区域的动态宽度.

word-break: keep-all;


ekerner.. 16

我建议忘记前,然后把它放在textarea.

您的缩进将保留,并且您的代码不会在路径或其他内容中包装.

如果要复制到剪贴板,也可以更轻松地在文本区域中选择文本范围.

以下是一个php摘录,所以如果你不在PHP那么你打包html特殊字符的方式会有所不同.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

有关如何在js中将文本复制到剪贴板的信息,请参阅:如何使用JavaScript复制到剪贴板?.

然而...

我只是检查了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;
}

此外,stackoverflow代码块的内容使用(我认为)http://code.google.com/p/google-code-prettify/突出显示语法.

这是一个很好的设置,但我现在正在与textareas.

  • 除了输入之外的其他内容不会使用文本区域在语义上不正确吗?对我来说似乎是一个奇怪的解决方案. (13认同)
  • 不像在"pre"标签中添加一堆格式样式那样语义上不正确,因为"pre"表示所包含的文本是预先格式化的,因此不需要额外的格式,而是按原样使用;)我建议不要给"语义"优先于"功能". (2认同)

vovahost.. 15

我结合了@richelectron和@ user1433454的答案.
它工作得很好,并保留文本格式.

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

</pre>


Bobby Jack.. 14

你可以:

pre { white-space: normal; }

维护等宽字体但添加自动换行,或者:

pre { overflow: auto; }

这将允许固定大小与水平滚动长行.


Eduardo Camp.. 7

尝试使用

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

或者更好地抛出CSS.

  • 这个解决方案的问题是它也会解散换行符......例如,任何文本与段落的分离都将丢失. (2认同)