Question

我有一个网页，其中显示了流畅的文字，并在br标记内散布了换行符（span）。我希望span之后的每个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 ：CSS中的text-indent仅支持块元素。在span标记上使用display: block将使缩进工作，但随后需要在span标记之间合并内容以防止任何不需要的块元素换行。另一种方法是插入一些 而不是设置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>

Answer 2

因为text-indent仅适用于块级元素，所以这可能适用于你

＆＃13;

$(document).ready(function(){

    $("p").css("text-indent","1.5em");
	

});

＆＃13;

<!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>

＆＃13;

缩进后的缩进文本

2 个答案: