html -
cssのみを使用した改行（のような）

Question

純粋な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>、同じ行に留まらなければならないとき、私はできません。

score 144 · Accepted Answer

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

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

トリックはここから来ます：https ：//stackoverflow.com/a/66000/509752 （詳細な説明があります）

score 8 · Accepted Answer

8

試す

h4{ display:block;}

あなたのCSSで

于 2012-06-07T14:30:24.210 に答える

score 6 · Accepted Answer

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

score 0 · Accepted Answer

私はパーティーに遅れていることを知っていますが、これが私の2セントです。

CSS

li h4 {
   break-after: always;
}

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

4 に答える 4