在 HTML 中保留换行符但换行:可能吗?

问题描述

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

I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displaying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plain text email will appear.

基本上我想要一些像记事本一样的东西:换行符将表示换行符，但文本将换行以适应它的容器.

Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.

不幸的是，事实证明这很困难，除非我遗漏了一些非常明显的东西.我试过了:

Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:

1. CSS white-space: pre.这会保留空白但不会包装文本行，因此它们会超出长行的边界；

1. CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;

将 textarea 元素样式化为只读，没有边框，因此它基本上类似于 div.这里的问题是 IE 在严格模式下不喜欢 textareas 上的 100% 高度.奇怪的是，他们在怪癖模式下还可以，但这对我来说不是一个选择.

Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.

CSS white-space: prewrap.这是 CSS 2.1，所以可能没有得到广泛支持(不过，如果 IE7 和 FF3 支持它，我很高兴；我不关心 IE6，因为它是一个管理功能，没有人会运行将使用此页面的 IE6).

CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if it's supported in IE7 and FF3 though; I don't care about IE6 for this as its an admin function and no one will be running IE6 that will use this page).

还有其他建议吗?这真的有那么难吗?

Any other suggestions? Can this really be that hard?

无法评论更多信息.是的，目前我正在使用字体 Courier New(即固定宽度)并在服务器端使用正则表达式将换行符替换为 <br> 标签，但现在我需要编辑内容和它只是让我感到尴尬，您需要删除并添加 <br> 以使其工作.

edit: can't comment so more info. Yes at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.

没有更好的方法了吗?

推荐答案

尝试

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*/
}

这篇关于在 HTML 中保留换行符但换行:可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！