text-indent是唯一语义正确且浏览器原生支持的首行缩进方式，它只控制首行起始位置，不影响换行行为；失效主因是元素非块级、white-space干扰、高优先级样式覆盖或direction翻转等渲染条件不满足。

text-indent 是唯一正确控制首行缩进的方式，它不影响换行行为；所谓“避免换行”是误解——缩进和换行是两个独立控制项，别混用 white-space 或 margin 去凑效果。

为什么加了 text-indent 还看到换行？

这不是 text-indent 的问题，而是你误把「段落内换行」当成了「缩进失效」。text-indent 只管首行开头空多少，不阻止
、

里的\n，也不影响自动折行。常见混淆点：

• 在 <p></p> 里手动写了 <br> 或换行符 —— 这些会真实产生新行，和缩进无关
• 用了 <pre class="brush:php;toolbar:false;"></pre> 标签却没处理 white-space，导致源码换行被保留，看起来像“缩进错位”
• 给 p 设了 white-space: nowrap，文字挤成一行，首行缩进还在，但你看不到“第二行”，误以为缩进没起作用
• 段落内容本身很短，单行就结束了，自然没有“第二行”可对比

text-indent 和 white-space 到底怎么配？

两者职责完全不同：text-indent 控制首行起始位置，white-space 控制空格、换行符是否生效。它们可以共存，但必须清楚各自影响范围：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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。

哪些操作会让 text-indent 看起来“失效”？

不是代码写错了，而是渲染条件被破坏。最容易被忽略的几个硬性前提：

• p 的 display 必须是 block（或 table 等块级上下文），inline 或 inline-flex 下 text-indent 完全不计算
• 父容器是 flex 或 grid 时，p 默认仍是块级，但若被设了 align-self: center 或 justify-self，可能触发格式化上下文变化，建议显式加 display: block
• 段落开头有 <img>、<svg></svg> 等内联替换元素，text-indent 会从该元素左边缘开始算，不是从文字起始处
• 某处样式写了 text-indent: 0 !important（富文本编辑器输出或 CSS 重置库常见），直接覆盖你的设置
• 用了 direction: rtl 且没注意缩进方向已自动翻转到右侧

调试时最该看哪一项？

打开浏览器开发者工具，选中目标 <p></p>，切到 Computed 面板，直接搜 text-indent 和 display。如果 text-indent 显示为 0px 或 display 不是 block，那就不用再猜了——优先解决这两个值。别依赖 HTML 源码缩进或预设经验，computed 值才是最终渲染依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！