Podział wiersza (jak <br>) przy użyciu tylko CSS

84

Czy w czystym css, czyli bez dodawania dodatkowych tagów html, można zrobić podział wiersza <br>? Chcę końca wiersza po <h4>elemencie, ale nie przed:

HTML

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

CSS

h4 {
  display: inline;
}

Znalazłem wiele takich pytań, ale zawsze z odpowiedziami typu „użyj wyświetlania: blok;” , czego nie mogę zrobić, kiedy <h4>muszą pozostać na tej samej linii.

Steeven
źródło
Dlaczego ten element jest h4? Dlaczego używasz go w takim miejscu?
toniedzwiedz
Nasza ciekawość, jaki jest powód, dla którego nie chcesz używać <br/>?
Philip Kirkbride
1
Powód: mam bardzo dużo elementów listy. Zastanawiałem się też, czy istnieje eleganckie rozwiązanie. Zwykle nie jest przyjemnie używać tagów br między elementami (a nagłówek widzę jako własny element)
Steeven,
@Tom, to jest uproszczony przykład. Mam jakiś tekst i nagłówki w każdym elemencie listy.
Steeven

Odpowiedzi:

134

Działa to tak:

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

Przykład: http://jsfiddle.net/Bb2d7/

Sztuczka pochodzi stąd: https://stackoverflow.com/a/66000/509752 (aby uzyskać więcej wyjaśnień)

adriantoina
źródło
10
\aoznacza podział wiersza, znak U + 000A i white-space: premówi przeglądarkom, aby traktowały to jako podział wiersza w renderowaniu.
Jukka K. Korpela
Dobrze, dzięki @ JukkaK.Korpela. Dlaczego więc nie jest renderowany jako podział wiersza w pierwszej kolejności? Chociaż to rozwiązanie jest proste, nadal przesłania inne polecenia spacji.
Steeven
3
@Steeven, tylko zastępuje wartość początkową white-spacew :afterpseudo-elementu, który zawiera tylko końca linii. Jest to potrzebne, ponieważ w HTML, domyślnie, podział wiersza w treści elementu jest równoważny spacji i nie powoduje podziału wiersza w renderowanym dokumencie.
Jukka K. Korpela
3
@Alshten, dzięki, ma sens i jednocześnie całkowicie mnie wkurza.
sonjz
Nigdy bym o tym nie pomyślał. Szkoda, że ​​nie można wstawić HTML!
Lodewijk
7

Próbować

h4{ display:block;}

w twoim css

http://jsfiddle.net/ZrJP6/

Philip Kirkbride
źródło
1
plus rozsądne użycie margin-bottompowinno Cię tam doprowadzić.
Jeremy Holovacs
4
Ale jeśli dobrze rozumiem, h4 musi znajdować się w tym samym wierszu, co poprzedni tekst. W przypadku display: block przed h4 znajduje się podział wiersza.
adriantoine
Co? margin-bottomumieści h4 w tym samym wierszu co poprzedni tekst?
Steeven
!! To nie jest działające rozwiązanie: w przeglądarkach takich jak Safari, linia po będzie "display: none"!
Gregdebrick
5

Możesz użyć, ::afteraby utworzyć 0pxblok -height po znaku <h4>, który efektywnie przesuwa wszystko po <h4>następnej linii:

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>

0b10011
źródło