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更美观。