text-indent在组件内不生效的主因是段落元素未设为块级或受flex/grid父容器影响；需显式设display: block，用CSS自定义属性统一管理缩进值，并注意中文字体悬挂特性及SSR时内联样式的优先级问题。
用 text-indent 时为什么组件内不生效
常见原因是组件容器（比如 Vue 的 <template> 或 React 的 JSX 返回值）没给段落元素设置 display: block，或者父级用了 display: flex / display: grid。text-indent 只对块级元素生效，而组件模板里直接写的 <p> 有时被 CSS 重置为 inline 或受 Flex 容器影响失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在组件样式中显式写
p { display: block; text-indent: 2em; }，不要依赖浏览器默认 - 如果父容器是
flex，检查是否误加了align-items: center等导致子元素基线错位，间接让缩进视觉偏移 - 避免在组件根元素上用
text-align: justify，它和text-indent在某些浏览器下有渲染冲突
Vue / React 组件中如何统一管理段落缩进
不能靠全局 CSS 一刀切，因为不同组件可能需要不同缩进值（比如正文 2em、引用段落 0、标题后首行 1.5em）。推荐用 CSS 自定义属性 + 局部作用域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在组件根元素设
style="--para-indent: 2em;"，然后写p { text-indent: var(--para-indent, 0); } - Vue 单文件组件中，
<style scoped>下的p选择器会自动加属性选择器，但需注意：若用<template><p>写法，scoped不会影响子组件的p，得靠穿透（::v-deep p）或透传 class - React 中可用
className="article-paragraph"配合 CSS Modules，避免命名污染，同时支持动态className={\`paragraph--\${type}\`}
首行缩进遇到中文标点悬挂时的兼容处理
部分中文字体（如思源黑体、Noto Sans CJK）开启 font-feature-settings: "halt" 后，句号、顿号等会向左微移出边界，导致缩进看起来“少了一格”。这不是 bug，而是 OpenType 排版特性，但用户感知明显。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如需严格对齐，禁用悬挂：加
font-feature-settings: "halt" 0;（注意 0 表示关闭） - 更稳妥的做法是改用
padding-left模拟缩进（如p { padding-left: 2em; text-indent: -2em; }），但需确保第一行内容能正常换行，否则第二行会顶到左边 - 测试时务必在 Safari（macOS/iOS）下验证，它的 OpenType 特性启用策略和其他浏览器不同
SSR 或静态生成时 inline-style 覆盖 text-indent
Next.js、Nuxt 等框架服务端渲染时，若组件内通过 style={{ textIndent: '2em' }} 设置内联样式，会比 CSS 文件中的 text-indent 优先级高，导致主题切换或响应式缩进失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用 JS 动态写
textIndent，改用 class 切换，例如className={\`p-indent-\${size}\`} - 如必须用内联样式，加
!important会破坏可维护性，不如用 CSS-in-JS 库（如 Emotion）的css函数生成带哈希的规则，保证 SSR/CSR 一致 - 检查构建产物中是否存在重复插入的
<style>标签，某些 HMR 插件会在热更新时多塞一份样式，造成覆盖混乱
缩进看着简单，但在组件化场景里，它卡在样式作用域、排版引擎差异、服务端/客户端一致性三个断层上。最容易被忽略的是字体特性带来的视觉偏移——同一段 CSS，在 Chrome 和 Safari 里可能差半个像素，而这半个像素会让整段文字“看起来没缩进”。
