Line break (like ) using only css

CSS 만 사용하는 줄 바꿈 (예 :)

---

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

이와 같은 많은 질문을 찾았지만 항상 "use display : block;" , 내가 할 수없는 <h4>, 같은 줄에 있어야 할 때 .

---

다음과 같이 작동합니다.

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

예 : http://jsfiddle.net/Bb2d7/

트릭은 여기에서 제공됩니다 : https://stackoverflow.com/a/66000/509752 (더 많은 설명을 위해)

---

시험

h4{ display:block;}

당신의 CSS에서

http://jsfiddle.net/ZrJP6/

---

를 사용 ::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>

참고 URL : https://stackoverflow.com/questions/10933837/line-break-like-br-using-only-css