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

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

答案来自CSS：

您可以：

pre { white-space: normal; }

要保留单空格字体但添加换行符，或：

pre { overflow: auto; }

这将允许固定大小的长线水平滚动。

尝试使用

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

---

或者最好抛出CSS。

我建议忘记pre，把它放在文本区

你的缩进将保留，你的代码不会被包裹在路径或某物的中间。 如果要复制到剪贴板，也可以更轻松地选择文本区域中的文本范围

以下是php摘录，因此如果您不使用php，那么打包html特殊字符的方式将有所不同

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

另外，stackoverflow代码块的内容是使用语法突出显示的

---

这是一个很好的设置，但我现在只使用文本区域。

这非常适合包装文本并在预标记中保留空白：

前{ 空白：预包装； }

---

以下几点帮助了我：

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

---

谢谢

我发现跳过pre标记并在div上使用空格：pre wrap是一个更好的解决方案

word-break: keep-all;

---

这就是我需要的。它可以防止单词被打断，但允许在pre区域中使用动态宽度

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

元素代表预先格式化的文本，用于在其标记之间保留文本或任何内容的格式。因此，实际上没有在-Tag中自动换行或换行

元素中的文本以固定宽度字体显示，通常为Courier字体，并保留空格和换行符

，强调我自己做的。

对于我来说，最好的跨浏览器方式是换行并显示准确的代码或文本：chrome、internet explorer、Firefox

CSS:

HTML:

---

我结合了@richelecon和@user1433454的答案。 它工作得很好，并保留了文本格式

---

最简洁的是，这迫使内容在不破坏单词的情况下包装在预标记内。干杯

使用空白：预换行和一些前缀，以便在pres内自动换行

---

---

不要使用wrap：break word，因为它只是将一个单词一分为二，这可能是您不想要的。

这一功能在IE 7中似乎有效，但在IE 6中不起作用。这是唯一的建议，似乎有希望的IE。。。所有其他建议对其他浏览器都有好处……nevermind一定是浏览器缓存的东西。重启IE 6，一切正常。干杯。这个解决方案的问题是它也会溶解换行符。。。例如，将文本分成段落的任何分隔都将丢失。将文本区域用于输入以外的内容在语义上不正确吗？对我来说，这似乎是一个奇怪的解决方案。当pre建议所包含的文本是预格式化的，因此不需要额外的格式，而是按原样处理时，在语义上不像在pre标记中添加一堆格式样式那样不正确；我建议不要让语义优先于功能。我不认为它有任何语义不同，它只是意味着应该保留换行和多个空格。它是预格式化的缩写。您的意思是，它实际上只是预格式化换行符和多个空格的缩写？内容的类型是由内部标记指定的，具体取决于预格式化文本的类型。我会把我的朋友推荐到w3c预标记wiki页面：比流行的答案更简单。谢谢在我的例子中，我想显示包含制表符的预格式化文本，以组成一些表格。我使用了您的解决方案，并添加了一个monspace字体，使所有列对齐：style=空白：预换行；字体系列：monospace；虽然这可能更容易，但使用代码块可能会有更多的语义价值。我知道这一点，但为什么这个解决方案比在样式表中设置一次要好呢？我在一个HTML输出屏幕上有多个div，需要这个。似乎样式表中元素的一个固定修复了所有的问题。@ WebFrassYES，制作一个.PrExpe类将是最好的。这是因为它只是CSS 3——从ADAMbox看到更多兼容性。考虑使用一个自动化工具，而不是添加特定于供应商的前缀，例如，哦，谢谢你的溢出提醒！非常适合移动显示器。我认为最好使用空白：预包装；因为它尊重white spacesWorked对我来说太棒了：-xmp从HTML3.2开始就被弃用了，从HTML5中完全删除了，从一开始就没有正常工作过。在不同的浏览器中，它的实现并不一致；和单词包装：打破单词；在我的css中，保留json片段的缩进，pre-line会删除它。彩色白空间：行前；而且，在某些情况下，所有与浏览器兼容的风格似乎都更合适，例如，在没有标签的情况下，因为它会占用浏览器的空间

---

如果有，则重新规划线路some@MediaVince，前一行折叠所有空格，而不仅仅是在行的开头。有一个汇总空白值行为的表。不符合问题的要求，它会导致换行，甚至在单词之间。你可以删除那一行。在现代浏览器上，您不需要任何-moz或其他前缀。@Flimm不过，word wrap:break word是我唯一能让Gmail Notifier Pro断行的方法，它不会将单词一分为二。这意味着该程序似乎使用了一个旧的IE引擎。Mozilla表示，这是IE 5.5-7中的空白替换，而不是5.5+。它只是说明了一个事实，即可以在预标记中自动换行文本，尽管预标记并不打算自动换行。这是对作者问题的唯一正确回答。任何其他答案或可能的解决方案都会鼓励滥用元素。本质上，如果你想把类型放在一个元素里面，让它包装起来，用标记代替，并用CSS类以你喜欢的任何方式对它进行样式设置。我不知道为什么人们会觉得给出这种“我比你聪明”的建议很有帮助。不，标签不是合适的替代品：它既不保留空格也不保留换行符。标记对于保留换行符很有用，但有时有必要添加额外的换行符，就像任何代码编辑器可能同时保留换行符和向长行添加换行符一样。从目前的情况来看，这在ios safari上不起作用。长的线会使预紧器变大，导致其溢出容器。添加换行：断开单词；解决了这个问题。

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

word-break: keep-all;

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

<xmp> your text or code </xmp>

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

</pre>

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