javascript - 在 <br> 之后缩进文本

Question

我有一个呈现流动文本的网页，换行符 (br) 散布在 span 标记内。我希望 br 之后的每个 span 都有一个缩进。是否可以用纯 CSS 做到这一点？我宁愿在不操纵文本本身的情况下这样做。 (这是可能的，但很困惑)请注意，br 标记位于 span 标记内。

这是一些示例代码，我尝试用纯 CSS 实现。

.text + br {
  text-indent: 1.5em;
}
.text > br + .text {
  text-indent: 1.5em;
}

<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="text">Donec accumsan tortor at maximus vehicula.<br></span>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="text">Donec accumsan tortor at maximus vehicula.<br></span>

更新:这在纯 CSS 中可能是不可能做到的。我的元素使用 jQuery，因此可以接受使用 jQuery 的解决方案。

更新 2:CSS 中的 text-indent 仅支持 block 元素。在 span 标签上使用 display: block 可以使缩进有效，但随后需要在 span 标签之间合并内容，以防止任何不需要的 block 元素换行。另一种方法是插入多个   而不是设置 CSS 类。

Answer 1

我不相信有任何 css 选择器可以让您定位父元素 如果它包含给定的子元素。您可能被迫使用 JavaScript(除非您愿意以允许您使用 css 选择器实现所需格式的方式处理数据)。

一个 jQuery 解决方案如下所示:

$( ".text:has(br)" ).next(".text").addClass( "indent" );

span {
    display:block;
}
.indent {
    text-indent: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="text">Donec accumsan tortor at maximus vehicula.<br></span>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="text">Donec accumsan tortor at maximus vehicula. asdfasdfasdf a<br></span>