如何实现每个<br/>后换行缩进但div首行不缩进？

我有多个<div>元素，这些元素里可能包含一个或多个<br/>硬换行符。需求是：每个<br/>之后的新行文本都要缩进，但<div>的首行不需要缩进。

我一开始尝试了这段CSS：

div { text-indent: 2rem each-line; }

这段代码确实能缩进<br/>后的文本，但同时也把<div>的首行缩进了。接着我想用下面的代码取消首行缩进，但没有效果：

div:first-line { text-indent: 0rem; }

原因是text-indent不属于:first-line伪元素允许使用的属性，而且也没法给:first-line设置负margin或padding来抵消。请问有没有可行的实现方案？

示例HTML代码：

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat metus turpis, et auctor eros porttitor sed.
  <br/>Sed ornare eget metus in interdum. Nulla ut orci eget eros ullamcorper semper.
  <br/>Aliquam fringilla urna lectus, ac vestibulum diam sodales eget.
</div>

我尝试的完整CSS代码：

div { text-indent: 2rem each-line; }
div:first-line { text-indent: 0rem; }

方法一：使用 text-indent 的 hanging 关键字（推荐） #

text-indent的hanging值完美匹配需求：首行不缩进，其余所有行（包括<br/>换行后的行）自动应用缩进，无需额外处理首行。

代码如下：

div {
  text-indent: 2rem hanging;
}

该方案简洁高效，现代主流浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持。

方法二：兼容旧浏览器的 fallback 方案 #

如果需要兼容不支持hanging关键字的旧浏览器，可以通过「整体内边距 + 首行负偏移」实现：

div {
  padding-left: 2rem;
  line-height: 1.5; /* 保证行高稳定，避免偏移错位 */
}
div:first-line {
  margin-left: -2rem;
}

原理：给整个<div>设置2rem左内边距，让所有行默认拥有缩进；再通过:first-line给首行设置负margin，将首行拉回原位置，而<br/>后的新行不受:first-line影响，保持缩进效果。

方法三：极端场景备选方案（不推荐） #

如果上述方法都无法适用，可通过<br>配合伪元素模拟缩进，但该方法灵活性较差：

div {
  position: relative;
  line-height: 1.5;
}
br {
  display: block;
  position: relative;
}
br::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 2rem;
  height: 1px;
}

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