css 中 white-space 属性作用 css 中 white-space 属性的使用场景

white-space 属性用于控制元素内文本的空白符（空格、制表符、换行符）的显示方式及换行行为，核心作用是精细化文本排版，避免浏览器默认处理不符合预期。

• normal（默认值）：折叠连续空白符（多个空格/制表符/换行符合并为1个空格），文本自动换行（遇容器边缘或换行符时换行）。

  p { white-space: normal; } /* 普通段落文本的默认行为 */

• nowrap：折叠连续空白符，但强制文本不换行（除非显式插入 <br> 标签）。适用场景：单行标题、导航菜单项等需强制不折行的文本。

  .single-line-text { white-space: nowrap; }

• pre：保留所有空白符（包括空格、制表符、换行符），且文本不自动换行（类似 <pre> 标签）。适用场景：展示代码片段、诗歌、ASCII艺术等需保留原始格式的文本。

  pre, .code-block { white-space: pre; }

• pre-wrap：保留所有空白符，但允许文本在必要时自动换行（结合 pre 和 normal 的特性）。适用场景：长篇代码示例、需保持缩进但避免溢出的文本。

  .formatted-text { white-space: pre-wrap; }

• pre-line：折叠连续空白符（合并为1个空格），但保留源代码中的换行符，并允许自动换行。适用场景：处理用户输入的评论或描述（保留换行但折叠多余空格）。

  .user-comment { white-space: pre-line; }

• break-spaces：类似 pre-wrap，但会在每个保留的空白字符后提供换行机会（包括行尾空白符）。适用场景：极端精细的排版需求（日常开发中较少使用）。

1. 显示代码或预格式化文本：使用 pre 或 pre-wrap 保蚂闷留代码的缩进和换行，避免浏览器折叠空白符。

   
   .code-block { white-space: pre; } /* 严格保留格式 */.responsive-code { white-space: pre-wrap; } /* 允许小屏幕自动换行手消 */

2. 单行文本溢出省略：组合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 实现单行省略效果。适用场景：新闻标题、卡片摘要等需限制行数的文本。

   .ellipsis-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

3. 控制按钮或导航文字不换行：通过 white-space: nowrap 确保按钮或导航菜单的文字始终显示在一行，避免小屏幕下拆散。

   .nav-item { white-space: nowrap; }

4. 处理用户输入内容：使用 pre-line 保留用户输入的毕物知换行符，同时折叠连续空格，使内容更整洁。适用场景：评论框、表单输入等需保留换行但清理多余空格的场景。

   .user-input { white-space: pre-line; }

• 与 overflow 和 text-overflow 配合：white-space: nowrap 是单行省略效果的基础，需结合 overflow: hidden 和 text-overflow: ellipsis 实现完整功能。示例：

  .single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

• 与 word-break 的区别：

  white-space 控制空白符和整体换行行为（如是否允许文本换行）。

  word-break 控制超长单词或 URL 的断行规则（如是否允许在单词中间断开）。示例：

  .long-word { white-space: normal; /* 允许文本换行 */ word-break: break-all; /* 强制超长单词断行 */}

• 与弹性盒子（Flexbox）或网格（Grid）布局的配合：若子项文本行为异常（如未按预期换行），可能是父容器布局模式影响了宽度计算。此时需设置 min-width: 0 或调整宽度限制，使 white-space 生效。

总结：white-space 通过不同值精准控制文本排版，结合其他属性可解决复杂布局问题，是前端开发中处理文本显示的关键工具。