text-indent是唯一语义正确、浏览器原生支持的首行缩进手段，但需满足块级上下文、无高权重覆盖、无内联替换元素干扰等条件才生效；常见失效原因包括p设为inline/inline-block、父容器为flex/grid未触发bfc、段落开头嵌入img/svg、或被内联style中text-indent:0覆盖。
text-indent 是唯一语义正确、浏览器原生支持的首行缩进手段，但它不是“写了就生效”的开关——得满足块级上下文、无高权重覆盖、无内联替换元素干扰等条件才起作用。
为什么 text-indent 加了却没效果
不是 CSS 写错了，而是渲染前提被破坏了：
-
p被设成display: inline或inline-block→ 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid，且未触发 BFC →p的块级盒行为被覆盖 - 段落开头嵌了
<img>、<svg></svg>或display: inline-flex元素 → 缩进发生在该元素左侧，视觉上等于没动 - 某处更高权重样式写了
p { text-indent: 0 }（比如富文本编辑器输出的内联style）→ 直接覆盖你的设置
最快定位方式：用开发者工具看目标元素的 Computed → display 是否为 block，再点开 Computed → text-indent 确认最终值。
white-space 控制换行行为的关键参数
HTML 默认合并连续空白（包括换行符、制表符、多个空格），要改变这个行为，必须靠 white-space：
-
white-space: normal→ 默认行为，换行符被忽略，空格合并 -
white-space: pre→ 完全保留源码空白，适合代码块，但会禁用自动折行 -
white-space: pre-wrap→ 保留换行符和空格，同时允许长单词在边界处折行（最常用） -
white-space: pre-line→ 合并空格，但保留换行符（适合从后端吐出带\n的纯文本）
注意：white-space 对 flex 或 grid 子项的约束力有限；若子项是 a 标签，默认仍可能因 flex-shrink: 1 被压缩导致文字断行，此时需配合 white-space: nowrap 和 flex: 0 0 auto。
导航菜单里文字换行失控怎么收口
小屏下导航文字突然折行，不是文字“想换行”，是 flex-shrink: 1（默认开启）+ 未设 flex-wrap 导致的布局挤压：
- 给
.menu__link加white-space: nowrap→ 防止链接内部文字被拆开 - 给
.menu__item设flex: 0 0 auto→ 关掉flex-shrink，确保文字变长时容器不缩 -
nav ul必须设flex-wrap: wrap（不是子项！）→ 窄屏时整行菜单自动折成两行 - 图片 Logo 和文字混排时，给 Logo 加
flex-shrink: 0，防止它被挤变形
别在响应式断点里一刀切地禁止换行；中屏（769–1024px）可用 clamp(1rem, 2.5vw, 1.2rem) 动态缩放字体延缓折行，小屏（≤768px）再放开 white-space: normal 让文字自然换行。
<p></p> 段落排版的最小可靠配置
90% 的段落排版问题，靠三行 CSS 就能解决：
p { margin: 1em 0; text-indent: 2em; line-height: 1.5; }-
.article p:first-child { margin-top: 0; }→ 首段顶空去掉 -
.article p:last-child { margin-bottom: 0; }→ 末段底空去掉
注意：text-indent: 2em 是中文黄金值，它随字号缩放；若用 px，必须配套固定 font-size，否则系统缩放或高 DPI 屏下会失准。另外，<p></p> 内严禁嵌套 <div> 或另一个 <code><p></p>，浏览器会自动修复结构，结果不可控——多出空段落、语义断裂、CSS 选择器失效都可能发生。
