cssのみを使用した改行（<br>など）

純粋なcssで、つまりhtmlタグを追加せずに、次のように改行することは可能<br>ですか？<h4>要素の後に改行したいが、前にはしたくない：

HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

CSS

h4 {
  display: inline;
}

私はこのような質問をたくさん見つけましたが、常に「display：block;を使用してください」のような答えがあります。、<h4>同じ行に留まらなければならないとき、私はできません。

html css styling

— スティーブン
ソース

この要素がh4であるのはなぜですか？なんでこんなところに使うの？

— toniedzwiedz 2012年

私たちの好奇心、あなたが<br/>を使いたくない理由は何ですか？

— フィリップカークブライド2012年

理由：リスト要素が非常にたくさんあります。そして、私はまた、エレガントな解決策が存在するかどうか疑問に思いました。通常、要素間でbrタグを使用するのは

— 適切

@トム、これは単純化された例です。各リスト要素にsomテキストとヘッダーがあります。

— スティーブン2012年

— ユーザー

回答:

134

それはこのように動作します：

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

トリックはここから来ます：https：//stackoverflow.com/a/66000/509752（詳細はこちら）

— エイドリアントイン
ソース

\aは改行、文字U + 000Aを意味しwhite-space: pre、レンダリングで改行として扱うようにブラウザに指示します。

— Jukka K. Korpela 2012年

さて、@ JukkaK.Korpelaに感謝します。では、そもそもなぜ改行としてレンダリングされないのでしょうか。このソリューションは単純ですが、それでも他の空白コマンドをオーバーライドします。

— スティーブン2012年

@Steeven、それだけのための初期値よりも優先されますwhite-space上:afterだけで改行が含まれている擬似要素を、。また、HTMLでは、デフォルトで要素コンテンツの改行はスペースと同等であり、レンダリングされたドキュメントで改行を引き起こさないため、これが必要です。

— Jukka K. Korpela 2012年

@Alshten、ありがとう、理にかなっていると同時に、私を完全に奇妙にしています。

— sonjz 2013

これを考えたことはなかっただろう。HTMLを挿入できないのは残念です！

— Lodewijk 2014年

試してみてください

h4{ display:block;}

あなたのCSSで

— フィリップ・カークブライド
ソース

加えて、いくつかの賢明な使用はmargin-bottomあなたをそこに連れて行くべきです。

— Jeremy Holovacs 2012年

しかし、私がよく理解しているのであれば、h4は前のテキストと同じ行にある必要があります。display：blockを使用すると、h4の前に改行があります。

— adriantoine 2012年

何？margin-bottomh4を前のテキストと同じ行に配置しますか？

— スティーブン2012年

!! これは機能する解決策ではありません。Safariなどのブラウザでは、後の行は「display：none」になります。

— グレッグデブリック

を使用::afterして、の0px後に-heightブロックを作成できます<h4>。これにより、後のすべてが効果的<h4>に次の行に移動します。

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>

— 0b10011
ソース