单独回车的CSS空白预包装规则

Question

将单独的回车字符放入以white-space: pre-wrap分隔的HTML块是否有效white-space: pre-wrap ？

我有一个正在接收SOAP消息并将消息记录到文件的应用程序。 我们的日志记录代码总是剥离换行符，因此在Unix上，这是一个单行日志条目。 输入的消息虽然是Windows格式CRLF，所以在删除换行符之后，我剩下的是单独的回车符。

应用程序上的日志查看器屏幕显示一个表，其中的日志条目具有white-space: pre-wrap格式。 至少在我的浏览器上，这看起来不错，单独的回车符与换行符或CRLF一样。

这是可靠的行为吗？

Answer 1

是的，这是有效的。 使用white-space: pre-wrap; 与<pre>完全相同，只是它会根据其父级的边界自然地换行。

但是，您应该考虑确保CSS与跨浏览器兼容。

#log {
    white-space: pre-wrap;       /* CSS3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

您还可以使用white-space: pre; 如果您想使行超出其父级的边界，以使输出中的所有内容都在一行上