CSS多個空格自動換行

在HTML中，多個空格將被瀏覽器自動壓縮為一個空格。但是，在某些情況下，我們希望多個空格能夠自動換行而不被壓縮。這時我們可以使用CSS的white-space屬性來解決這個問題。

white-space屬性

white-space屬性是CSS的一個文本屬性，用于設置空白字符如何處理。它決定了空格、換行符、制表符等是否保留，是否折疊或是否換行。

關于white-space屬性有三個常用的取值:

1. normal: 正常處理空白字符，合并空白字符，并在必要時進行斷行。
2. pre: 保留空白字符和換行符。不合并相鄰的空白字符，也不自動換行。
3. pre-wrap: 保留空白字符和換行符。但是在必要時進行斷行。

如何使用white-space屬性

可以將white-space屬性應用于單個元素、一個代碼塊或整個頁面。語法如下：
單個元素：
div{
white-space: pre;
}
一個代碼塊：
keep    不             空            行
keep    不             空            行
整個頁面：
html{
white-space: pre-wrap;
}

結論

white-space屬性可以很好的解決在HTML中多個空格被連成一個的問題。通過設置white-space屬性，我們可以使多個空格保留并自動換行。這不僅方便了我們的編碼，也使HTML更美觀。