text-indent是唯一语义正确且浏览器原生支持的首行缩进方式，它只控制首行起始位置，不影响换行行为；失效主因是元素非块级、white-space干扰、高优先级样式覆盖或direction翻转等渲染条件不满足。
text-indent 是唯一正确控制首行缩进的方式，它不影响换行行为；所谓“避免换行”是误解——缩进和换行是两个独立控制项，别混用 white-space 或 margin 去凑效果。
为什么加了 text-indent 还看到换行？
这不是 text-indent 的问题，而是你误把「段落内换行」当成了「缩进失效」。text-indent 只管首行开头空多少，不阻止
、
里的\n，也不影响自动折行。常见混淆点：
- 在
<p>里手动写了<br>或换行符 —— 这些会真实产生新行，和缩进无关 - 用了
<pre>标签却没处理white-space，导致源码换行被保留，看起来像“缩进错位” - 给
p设了white-space: nowrap，文字挤成一行，首行缩进还在，但你看不到“第二行”，误以为缩进没起作用 - 段落内容本身很短，单行就结束了，自然没有“第二行”可对比
text-indent 和 white-space 到底怎么配？
两者职责完全不同：text-indent 控制首行起始位置，white-space 控制空格、换行符是否生效。它们可以共存，但必须清楚各自影响范围：
-
white-space: normal（默认）：换行符被忽略，空格合并，text-indent正常作用于自动折出的第一行 -
white-space: pre：保留所有换行和空格，text-indent仍只作用于第一行开头，后续换行后的新行**不缩进** -
white-space: pre-wrap：保留换行符，但允许自动折行，text-indent依然只对第一行有效 -
white-space: nowrap：禁止折行，整段强制单行，text-indent有值但视觉上只体现为左侧留空
如果你真想“避免换行”，该调的是 white-space: nowrap 或限制容器宽度 + overflow: hidden，而不是动 text-indent。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
哪些操作会让 text-indent 看起来“失效”？
不是代码写错了，而是渲染条件被破坏。最容易被忽略的几个硬性前提：
-
p的display必须是block（或table等块级上下文），inline或inline-flex下text-indent完全不计算 - 父容器是
flex或grid时，p默认仍是块级，但若被设了align-self: center或justify-self，可能触发格式化上下文变化，建议显式加display: block - 段落开头有
<img>、<svg>等内联替换元素，text-indent会从该元素左边缘开始算，不是从文字起始处 - 某处样式写了
text-indent: 0 !important（富文本编辑器输出或 CSS 重置库常见），直接覆盖你的设置 - 用了
direction: rtl且没注意缩进方向已自动翻转到右侧
调试时最该看哪一项？
打开浏览器开发者工具，选中目标 <p>，切到 Computed 面板，直接搜 text-indent 和 display。如果 text-indent 显示为 0px 或 display 不是 block，那就不用再猜了——优先解决这两个值。别依赖 HTML 源码缩进或预设经验，computed 值才是最终渲染依据。
