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

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

1> adambox..：

---

答案,从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;`(和所有浏览器兼容的口味)在某些情况下似乎更合适(例如没有标签),因为它占用了行开头的空间(如果有的话)

---

@MediaVince,`pre-line`折叠所有空格(不仅仅是在行的开头).https://developer.mozilla.org/en-US/docs/Web/CSS/white-space有一个表格,总结了`white-space`值的行为.

2> 小智..：

---

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

pre{
    white-space: pre-wrap;
}

---

这是因为它仅是CSS 3-有关更多兼容性，请参见adambox的[answer]（http://stackoverflow.com/a/248013/221381）。

3> Mason240..：

---

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

 
content

---

在我的情况下,我想显示预格式化的文本,其中包含制表符的选项卡.我用你的解决方案PLUS我添加了一个monspace字体,所以所有列都对齐了:`style ="white-space:pre-wrap; font-family:monospace;"`

---

比流行的答案更容易.谢谢!

---

我知道我迟到了这个游戏，但是为什么这个解决方案比在样式表中设置一次更好？我在一个HTML输出屏幕上需要多个div。似乎对样式表中的元素进行了一次修复即可解决所有问题。

4> 小智..：

---

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

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

在这里查看实例.

5> 小智..：

---

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

word-break: keep-all;

6> ekerner..：

---

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

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

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

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

<?=htmlspecialchars($codeBlock);?>

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

然而...

我只是检查了stackoverflow代码块,它们用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;
}


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

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

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

7> vovahost..：
我结合了@richelectron和@ user1433454的答案.

它工作得很好,并保留文本格式.




        

8> Bobby Jack..：
你可以:

pre { white-space: normal; }


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

pre { overflow: auto; }


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

        

9> Eduardo Camp..：
尝试使用 

. 


或者更好地抛出CSS.

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