CSS中的text-indent属性详解

描述
text-indent是CSS中用于控制块级元素首行文本缩进的属性。它通过设定长度值（如px、em）或百分比值，实现首行内容的缩进或悬挂效果，常用于段落排版以提升可读性。需要注意的是，它只影响块级容器的第一行文本，且缩进方向受文本方向（direction或writing-mode）控制。

解题过程循序渐进讲解

步骤1：理解基本语法与取值
text-indent的语法如下：

text-indent: <length> | <percentage> | inherit | initial;

• 长度值（如20px、2em）：固定缩进量。使用em单位可基于当前字体大小动态调整（例如2em表示缩进两个字符宽度）。
• 百分比值（如10%）：基于父元素宽度计算缩进量，适用于响应式布局。
• 负值（如-20px）：实现悬挂缩进（首行突出于其他行）。

示例1：基础缩进效果

<p style="text-indent: 2em; width: 300px;">
  这是首行文本，缩进2个字符宽度。后续行保持正常对齐，不受缩进影响。
</p>

效果：首行向内缩进，其余行对齐容器边界。

步骤2：处理负值悬挂缩进
当text-indent为负值时，首行会向左（或右，取决于文本方向）突出，但需注意避免文本溢出容器边界。通常需配合padding-left或text-overflow处理溢出。

示例2：悬挂缩进

.hanging-indent {
  padding-left: 2em;       /* 为悬挂腾出空间 */
  text-indent: -2em;       /* 首行向左突出2em */
}

<div class="hanging-indent">
  首行突出显示，后续行对齐容器的内边距边界。
</div>

效果：首行起始位置向左突出，常用于编号列表或特殊标注。

步骤3：百分比值的响应式特性
百分比值基于父元素的宽度计算缩进量。当父元素宽度随视口变化时，缩进量会自动调整，适合响应式设计。

示例3：百分比缩进

.container { width: 50%; }
p { text-indent: 10%; } /* 缩进量为父容器宽度的10% */

若容器宽度为500px，则缩进50px；宽度变为300px时，缩进自动调整为30px。

步骤4：继承行为与边界情况

• 继承性：text-indent属性可被后代元素继承。若子元素也是块级容器，其首行会继承相同的缩进值。
• 内联元素无效：直接对<span>等内联元素设置text-indent无效，必须作用于块级容器（如<div>、<p>）。
• 置换元素忽略：如<img>、<input>等置换元素不受影响。

示例4：继承示例

<div style="text-indent: 1em;">
  <p>此段落继承父级的1em缩进。</p>
  <div>这个div也会继承缩进。</div>
</div>

步骤5：结合文本方向控制缩进方向
默认缩进方向由文本方向（direction或writing-mode）决定：

• direction: ltr（默认）：正值向右缩进，负值向左突出。
• direction: rtl：正值向左缩进，负值向右突出。

示例5：RTL语言中的缩进

.rtl-text {
  direction: rtl;
  text-indent: 2em; /* 向左缩进 */
}

步骤6：实际应用场景

1. 段落排版：通过text-indent: 2em实现中文段落首行缩进两字符。
2. 悬浮标点：负值缩进结合padding-left让引号、项目符号悬挂。
3. 复杂布局控制：在网格或弹性布局中，用百分比缩进保持比例协调。

注意事项：

• 若容器内首行是图片或换行符，可能无法触发缩进。
• 与text-align: justify同时使用时，需测试缩进与两端对齐的兼容性。

通过以上步骤，可灵活运用text-indent优化文本排版，并注意其与其他布局属性的相互作用。