用于单独回车的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;