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

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

基本上我想要一些像记事本一样的东西：新行将发出换行信号,但文本将以其他方式换行以适应其内容.

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

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

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

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

有没有更好的方法？

解决方法

尝试

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

原文地址：https://www.jb51.cc/html/231796.html