html - 用 pre 手动包装

Question

我正在尝试设计一个页面来显示电子邮件。我在 pre 中有这样的东西，带有 white-space: pre:

>> Donec tincidunt lobortis orci, a cursus dui ullamcorper>> vel. Praesent vel enim et lectus aliquet laoreet. In tempus>> sodales.

现在，当 screen-y 太小而溢出时，我不想使用 overflow: auto。相反，我希望它像这样自动换行:

>> Donec tincidunt lobortis orci, a cursus>> dui ullamcorper vel. Praesent vel enim>> et lectus aliquet laoreet. In tempus>> sodales.

如果我能够选择页面中的文本并将其原封不动地复制到电子邮件中，我不介意使用 :before。

好吧，让我们先尝试解决一个更简单的问题:假设每行前面没有“>>”前缀。我可以使用 white-space: normal，但是当我复制文本时，我得到一行没有换行符，这是不可取的。那么，如何让我的浏览器换行而不失去在显示时用换行符复制它的能力？

Answer 1

你可以使用:

pre {
 white-space: pre-wrap;      
 white-space: -moz-pre-wrap;  /* Mozilla */
word-wrap: break-word;       /* Internet Explorer */
}

但是它把 >> 当作一颗子弹来处理...... fiddle here