white-space: nowrap 是控制 HTML 文本单行渲染的核心 CSS 属性，它合并空白符、忽略换行符并禁用自动折行，使文本横向延伸溢出；需配合 width、overflow: hidden 及 text-overflow: ellipsis 才能安全截断。
white-space: nowrap 是让 HTML 内容（尤其是内联元素或文本）保持单行显示的最直接手段，但要注意它作用的是内容渲染行为，不是 HTML 源码格式化本身。
HTML 源码缩进和浏览器渲染是两回事
很多人想“让 HTML 格式化保持单行”，其实是混淆了两个层面：一是源文件里写成一行还是多行（纯编辑器行为，不影响页面），二是浏览器是否把内容折成多行显示。HTML 解析器会忽略标签间的空白符（换行、缩进、多个空格），所以 <p>Hello</p><p>World</p> 和换行缩进写的等价——只要没用 <pre> 或 white-space 控制，最终渲染效果一样。
如果你真在编辑器里需要强制单行保存（比如构建脚本清理 HTML），那得靠外部工具（如 html-minifier-terser），不是 CSS 能管的。
white-space: nowrap 让内容不换行
这是控制渲染层单行显示的核心属性，适用于 <span>、<a>、<div> 等任何块级或内联元素：
立即学习“前端免费学习笔记（深入）”；
- 加在容器上：
<div style="white-space: nowrap;">这整段不会折行，超宽就溢出</div> - 只对内联内容有效：若容器内有
<div>这类块级子元素，nowrap不会压制它们的换行行为（得额外设display: inline-block或flex） - 配合
overflow: hidden或text-overflow: ellipsis才能安全截断，否则可能撑破父容器
属性值缩进？HTML 标签内属性不支持缩进语法
HTML 规范里，标签内的属性之间只认空白符分隔，没有“缩进”概念。写成这样：
<input type="text" name="username" value="test">
和写成一行：<input type="text" name="username" value="test"> 完全等效。浏览器解析时会把所有空白（包括换行、tab、空格）统一视作一个空格。
常见误解：
- 以为加 tab 或换行能让属性“对齐好看”就影响渲染——不会
- 用 Prettier 或 VS Code 自动格式化时开启 “wrap attributes” 是为了可读性，和运行时无关
- 服务端模板（如 EJS、Jinja）里用
{%-去除前后空白，是为了避免生成多余换行，属于输出控制，不是 CSS 行为
真正要控制“显示为单行”的边界情况
有些场景下 white-space: nowrap 也不够用，得组合处理：
-
<pre>标签默认保留换行，加white-space: nowrap会强制它单行，但可能丢失原有空格结构 - 表格单元格（
<td>）内容过长，默认会折行；若想单行，除了nowrap，还得确认table-layout: fixed+width，否则宽度由内容撑开 - Flex 容器里的子项默认不换行，但若设了
flex-wrap: wrap，就得用white-space: nowrap配合min-width: 0防止文本溢出被压缩
最易被忽略的一点：white-space 的继承性很强，父元素设了 nowrap，子元素除非显式重置（如 white-space: normal），否则一并生效——调试时记得查 Computed 值。
