Interruzione di riga (come <br>) utilizzando solo css

È possibile in puro css, cioè senza aggiungere tag html aggiuntivi, fare un'interruzione di riga come <br>? Voglio l'interruzione di riga dopo l' <h4>elemento, ma non prima:

HTML

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

CSS

h4 {
  display: inline;
}

Ho trovato molte domande come questa, ma sempre con risposte come "usa display: block;" , cosa che non posso fare, quando <h4>devo restare sulla stessa linea.

html css styling

— Steeven
fonte

Perché questo elemento è un h4? Perché lo usi in un posto come questo?

— toniedzwiedz

Nostra curiosità, qual è il motivo per cui non vuoi utilizzare <br/>?

— Philip Kirkbride

Il motivo: ho un sacco di elementi della lista. E mi chiedevo anche se esiste una soluzione elegante. Di solito non è bello usare i tag br tra gli elementi (e vedo l'intestazione come un elemento a sé stante)

— Steeven

@ Tom, questo è un esempio semplificato. Ho qualche testo e intestazioni in ogni elemento della lista.

— Steeven

possibile duplicato di Come inserire un'interruzione di riga prima di un elemento utilizzando CSS

— utente

Risposte:

135

Funziona così:

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

Esempio: http://jsfiddle.net/Bb2d7/

Il trucco viene da qui: https://stackoverflow.com/a/66000/509752 (per avere maggiori spiegazioni)

— adriantoine
fonte

\asignifica interruzione di riga, carattere U + 000A e white-space: preindica ai browser di trattarlo come un'interruzione di riga durante il rendering.

— Jukka K. Korpela,

Ok, grazie @ JukkaK.Korpela. Allora perché non viene reso come un'interruzione di riga in primo luogo? Sebbene questa soluzione sia semplice, sovrascriverà comunque altri comandi di spazi vuoti.

— Steeven

@ Steeven, sovrascrive solo il valore iniziale per white-spacesullo :afterpseudo-elemento, che contiene solo l'interruzione di riga. Ed è necessario perché in HTML, per impostazione predefinita, un'interruzione di riga nel contenuto dell'elemento è equivalente a uno spazio e non causa un'interruzione di riga nel documento sottoposto a rendering.

— Jukka K. Korpela

@Alshten, grazie, ha senso e allo stesso tempo mi rende totalmente strano.

— sonjz

Non ci avrei mai pensato. È un peccato non poter inserire HTML però!

— Lodewijk

Provare

h4{ display:block;}

nel tuo css

http://jsfiddle.net/ZrJP6/

— Philip Kirkbride
fonte

più un uso giudizioso di margin-bottomdovrebbe portarti lì.

— Jeremy Holovacs

Ma se ho capito bene, h4 deve essere sulla stessa riga del testo precedente. Con display: block, c'è un'interruzione di riga prima di h4.

— adriantoine

Che cosa? margin-bottommetterà h4 sulla stessa riga del testo precedente?

— Steeven

!! Questa non è una soluzione funzionante: la tua riga dopo sarà "display: none" in browser come Safari !!

— Gregdebrick

È possibile utilizzare ::afterper creare un 0pxblocco di altezza dopo <h4>, che sposta effettivamente qualsiasi cosa dopo la <h4>riga successiva:

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>

Espandi lo snippet

— 0b10011
fonte