0

我有一个网页呈现流畅的文本，换行符 ( br) 穿插在span标签内。我希望每个span跟在 a后面的br都有一个缩进。可以用纯 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：text-indent在 CSS 中仅支持块元素。在 span 标签上使用display: block将使缩进起作用，但是需要在 span 标签之间合并内容以防止任何不需要的块元素换行符。另一种方法是插入一些&nbsp;而不是设置 CSS 类。

4

2 回答 2

3

我不相信有任何 css 选择器可以让您定位父元素 ，如果它包含给定的 child。您可能会被迫使用 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>

于 2014-12-12T15:45:55.170 回答
-1

由于 text-indent 仅适用于块级元素，也许这可能对你有用

$(document).ready(function(){

    $("p").css("text-indent","1.5em");
	

});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

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



</body>

</html>

于 2014-12-12T15:32:01.627 回答