答案是使用 white-space: nowrap 可禁止换行，需避免 word-wrap 或 br 标签影响，配合 overflow 和 text-overflow 可实现单行截断省略效果。
遇到CSS无法禁止换行的问题，通常是因为没有正确使用 white-space 属性。这个属性专门用来控制元素内空白符（空格、换行、制表符）的处理方式和文本是否换行。通过合理设置它，可以精准控制文本的换行行为。
理解 white-space 的常用取值
white-space 提供多个可选值，针对不同场景控制换行与空白：
- normal：合并空白符，允许文本自动换行（默认行为）
- nowrap：合并空白符，禁止换行，文本会在一行中持续延伸
- pre：保留空白符，只有遇到换行符才换行（类似 pre 标签）
- pre-wrap：保留空白符，允许换行，必要时也会自动折行
- pre-line：合并空白符，但保留换行符，允许自动换行
如果发现“无法禁止换行”，很可能是误用了 normal 或 pre-line，应改用 nowrap。
如何禁止换行：使用 nowrap
要让文本始终在一行显示，不换行：
立即学习“前端免费学习笔记（深入）”；
.example {
white-space: nowrap;
}
配合 overflow: hidden 或 text-overflow: ellipsis 可实现截断加省略号效果：
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
特殊情况处理
有时即使设置了 nowrap 仍换行，可能是以下原因：
- 父容器设置了 word-wrap: break-word 或 overflow-wrap，强制长单词换行，需将其设为 normal
- 元素内包含 br 标签或显式换行符，white-space 不影响标签行为
- 弹性布局（flex）中子项默认允许换行，需设置 white-space: nowrap 在具体文本元素上，而非容器
推荐组合用法
根据需求选择合适搭配：
- 单行不换行 + 省略号：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 保留格式并允许换行：
white-space: pre-wrap; - 代码片段显示：
white-space: pre;
基本上就这些。掌握 white-space 的行为逻辑，就能轻松控制文本是否换行，避免因默认样式导致的布局错乱。关键是根据内容类型选对值，不要只依赖 width 或 display 来控制换行。
