[html] CSS 만 사용하는 줄 바꿈 (예 : <br>)

Program / 글쓴이

추가 html 태그를 추가하지 않고 순수한 CSS에서 줄 바꿈을 만들 수 <br>있습니까? <h4>요소 뒤에서 줄 바꿈을 원 하지만 이전 은 원하지 않습니다.

HTML

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

CSS

h4 {
  display: inline;
}

I have found many questions like this, but always with answers like “use display: block;”, which I can’t do, when the <h4> must stay on the same line.

답변

It works like this:

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

Example: http://jsfiddle.net/Bb2d7/

The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)

답변

Try 

h4{ display:block;}

in your css

http://jsfiddle.net/ZrJP6/

답변

You can use ::after to create a 0px-height block after the <h4>, which effectively moves anything after the <h4> to the next line:

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>

Expand snippet

답변