请解释 CSS 中的 white-space 属性的作用，并说明如何使用它控制空白符的处理方式。

推荐答案

white-space 属性用于控制元素内空白符（包括空格、制表符和换行符）的处理方式。它决定了浏览器如何渲染文本中的空白字符，以及是否允许文本换行。

常用的 white-space 属性值及其作用包括：

• normal (默认值)：合并多个连续的空白符为一个空格，忽略换行符，并且在必要时自动换行。
• nowrap：合并多个连续的空白符为一个空格，忽略换行符，并且强制文本不换行，即使内容超出容器宽度也会溢出。
• pre：保留所有空白符（包括空格、制表符和换行符），文本不会自动换行，除非遇到显式的换行符 <br>。
• pre-wrap：保留所有空白符，并且在必要时自动换行，类似于 <pre> 标签的默认行为。
• pre-line：合并多个连续的空白符为一个空格，保留换行符，并在必要时自动换行。

本题详细解读

white-space 属性对于控制文本的排版和布局非常重要。不同的值会产生不同的渲染效果，理解这些差异有助于我们更精确地控制页面元素的显示。

1. white-space: normal (默认值):

   • 这是最常见的行为。浏览器会将连续的空格、制表符等空白字符压缩成一个空格。
   • 换行符被忽略，文本将根据容器的宽度自动换行。
   • 适用于大多数文本内容，无需特殊处理。

   .example {
       white-space: normal;
   }

   <div class="example">
     这是一段   包含多个    空格和换行符的文本。
     浏览器会自动处理空白符并换行。
   </div>

2. white-space: nowrap:

   • 与 normal 类似，多个连续空白符合并为一个空格。
   • **关键区别是：文本不换行。**即使容器宽度不足以容纳文本，也不会自动换行，而是会溢出容器或导致滚动条。
   • 适用于单行文本，例如导航栏菜单、按钮标题等。

   .example {
       white-space: nowrap;
   }

   <div class="example">
   这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文本，它不会换行，而是会溢出容器。
   </div>

3. white-space: pre:

   • 保留所有空白符，包括空格、制表符和换行符。
   • 文本不换行，除非遇到 <br> 标签。
   • 类似于 HTML 的 <pre> 标签的默认行为，适用于显示代码或需要精确控制空白符的场景。

   .example {
       white-space: pre;
   }

-- -------------------- ---- -------
 ---- ----------------
   --      --      --     ----      --------
   
   ------------------
 ------
 ---

--  --------------- ------------

 -   --------
 -   ------------------ --- ------- ---------
 -   -------------------------------

 ------
 -------- -
   ------------ ---------
 -
 ---

 -------
 ---- ----------------
 --      --      --     ----      --------

 ---------------------
 ------
 ---
-- --------------- ------------

- ---------------
-  -----------------
-  --------------------------------------

------
 -------- -
   ------------ ---------
 -
 ---
-------
 ---- ----------------
     --     --     --  ----     -
     -------
     --------------------------
 ------
 ---