web-dev-qa-db-ja.com

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;
}

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

htmlcssstyling
75
Steeven

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

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

例： http://jsfiddle.net/Bb2d7/

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

127
adriantoine

試して

h4{ display:block;}

あなたのCSSで

http://jsfiddle.net/ZrJP6/

6
Philip Kirkbride

::after を使用して、0pxの後に<h4>- heightブロックを作成できます。これは、<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>
4
0b10011