Отступ текста после <br>

У меня есть веб-страница, которая представляет текущий текст с разрывами строк (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: text-indent в CSS поддерживается только для блочных элементов. С помощью display: block в тегах span будет работать отступ, но затем содержимое должно быть объединено между тегами span, чтобы предотвратить появление нежелательных строк новой строки. Альтернативой является вставка ряда &nbsp; вместо установки класса CSS.

Источник

2 ответа

Я не верю, что есть какие-либо селекторы 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>

Источник

Так как текстовый отступ применяется только к элементам уровня блока, возможно, это может работать для вас

$(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>

Источник
Другие вопросы по тегам