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

추가 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.

html css styling

— Steeven
소스

Why is this element an h4? Why do you use it in a place like this?

— toniedzwiedz

Our of curiosity, what is the reason you don't want to use <br/>?

— Philip Kirkbride

The reason: I have an awfull lot of list elements. And I was also wondering if an elegant solution exists. It is usually not nice to use br tags between elements (and I see the header as an element of its own)

— Steeven

@Tom, this is a simplified example. I have som text and headers in each list element.

— Steeven

possible duplicate of How to insert a line break before an element using CSS

— user

답변:

134

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)

— adriantoine
소스

\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.

— Jukka K. Korpela

Okay, thanks @JukkaK.Korpela. Then why isn't it rendered as a line break in the first place? Though this solution is simple, it still would override other white-space commands.

— Steeven

@Steeven, it only overrides the initial value for white-space on the :after pseudo-element, which contains just the line break. And it is needed because in HTML, by default, a line break in element content is equivalent to a space and does not cause a line break in the rendered document.

— Jukka K. Korpela

@Alshten, thanks, makes sense & totally weirds me out at the same time.

— sonjz

Would have never thought of this. It's a shame one can't insert HTML though!

— Lodewijk

Try

h4{ display:block;}

in your css

http://jsfiddle.net/ZrJP6/

— Philip Kirkbride
소스

plus some judicious use of margin-bottom should get you there.

— Jeremy Holovacs

But if I understand well, the h4 has to be on the same line as the text before. With display:block, there's a line break before the h4.

— adriantoine

What? margin-bottom will put the h4 at the same line as the preceding text?

— Steeven

!! This is not a working solution : your line after will be "display : none" in browsers like Safari !!

— Gregdebrick

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

— 0b10011
소스