Question

我今天遇到了一个有趣的问题。我有一封我从网页发送的短信。我正在显示预览，并希望将预览保留为固定字体，保留空白区域，因为这就是纯文本电子邮件的显示方式。

基本上我想要一些像记事本一样的东西：换行符会发出一个换行符，但文本将以其他方式换行以适应它的容器。

不幸的是，除非我遗漏了一些非常明显的东西，否则这很难实现。我试过了：

CSS white-space: pre。这样可以保留空白区域，但不会包裹文本行，因此它们会在长行中出现边框;
将textarea元素设置为只读，没有边框，因此它基本上像div一样。这里的问题是IE在严格模式下不喜欢textareas的100％高度。奇怪的是，他们在怪癖模式下没关系，但这对我来说不是一个选择。
CSS white-space: prewrap。这是CSS 2.1所以可能没有得到广泛的支持（我很高兴，如果它在IE7和FF3中得到支持;我不关心IE6这个作为它的管理功能，没有人会运行将使用此页面的IE6）

还有其他建议吗？这真的很难吗？

编辑：无法评论更多信息。是的，目前我正在使用字体Courier New（即固定宽度）并在服务器端使用正则表达式用 标签替换换行符，但现在我需要编辑内容，这让我觉得很尴尬您需要删除并添加 以使其正常工作。

有没有更好的方法？

Answer 1

尝试

selector {
  word-wrap: break-word; /* IE>=5.5 */
  white-space: pre; /* IE>=6 */
  white-space: -moz-pre-wrap; /* For Fx<=2 */
  white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}

Answer 2

只需用 替换所有硬换行符，然后将文本放入具有所需宽度的div。您可以对空格执行相同操作：将其替换为 。

请确保在之后将特殊字符转义为HTML，否则不会解释，而是打印在页面上。

Answer 3

尝试用   替换任何双倍空格 - 这应该可以让您看到双重空格。

破解所有这些新行，并使用 进行努力。

设置文本输出的样式，使其看起来像font-family的固定宽度：

font-family:monospace;

您可能需要正确调整大小，小于周围文本的内容，但这样可以看到PRE的外观，以及纯文本电子邮件的外观。

将它全部放入带固定的DIV，这值得一看。

Answer 4

也许您可以使用RichTextEditor（例如FreeTextBox）来显示文本。

将编辑器的字体设置为Courier，禁用/隐藏工具栏，...

Answer 5

创建<pre></pre>标记或使用类似的内容  .... 

固定宽度，我认为文字包装

保留HTML中的换行符但包装文本：可能吗？

5 个答案: