タグ内に改行 ( br
) が散在するフロー テキストを表示する Web ページがあります。a に続くすべてにインデントを付けspan
たいと思います。純粋なCSSでこれを行うことは可能ですか? テキスト自体を操作せずにこれを行うことをお勧めします。(可能ですが、面倒です)タグはタグ内にあることに注意してください。span
br
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
in CSS はブロック要素でのみサポートされます。span タグで使用display: block
するとインデントが機能しますが、不要なブロック要素の改行を防ぐためにコンテンツを span タグ間でマージする必要があります。
別の方法として、CSS クラスを設定する代わりに数値を挿入する方法があります。