單獨回車的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; 如果您想使行超出其父級的邊界，以使輸出中的所有內容都在一行上