如何用CSS实现HTML <p>元素的多行文本缩进？

CSS没有原生属性直接支持为<p>元素内的前N行文本设置缩进，但可以通过以下几种实用技巧实现需求：

方法1：浮动伪元素实现前N行缩进 #

这是最简洁的纯CSS方案，通过创建一个浮动的空伪元素，占据前N行的左侧空间，让文本自然形成缩进效果。

示例代码（实现前2行缩进2em） #

<p class="indent-first-2">
  这是第一行文本，会被缩进。<br>
  这是第二行文本，同样会被缩进。<br>
  这是第三行文本，不会再缩进。<br>
  这是第四行文本，也不会缩进。
</p>

.indent-first-2 {
  line-height: 1.5; /* 自定义行高，需与伪元素高度计算匹配 */
}

.indent-first-2::before {
  content: "";
  float: left;
  width: 2em; /* 缩进的宽度，可替换为px、rem等单位 */
  height: calc(1.5em * 2); /* 高度 = 行高 × 需要缩进的行数 */
}

原理：浮动的伪元素会占据左侧的垂直空间，前2行文本会被挤到右侧形成缩进；当文本内容超过2行后，会自动绕到伪元素下方，不再受缩进影响。

方法2：拆分文本块（适合复杂场景） #

如果需要对不同行设置不同缩进宽度，或者需要更精细的控制，可以将需要缩进的文本包裹在<span>标签中，单独设置样式：

<p>
  <span class="indented">这是第一行缩进文本。</span><br>
  <span class="indented">这是第二行缩进文本。</span><br>
  这是第三行不缩进的文本。<br>
  这是第四行不缩进的文本。
</p>

.indented {
  padding-left: 2em; /* 设置缩进宽度 */
}

这种方法会增加HTML结构的复杂度，仅推荐在纯CSS方案无法满足需求时使用。

内容的提问来源于stack exchange，提问作者kintsukuroi