用于单独回车的 CSS 空白预换行规则

Question

将单独的回车符放入格式化为 white-space: pre-wrap 的 HTML 块中是否有效？

我有一个应用程序正在接收 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;