web-dev-qa-db-fra.com

Saut de ligne (comme <br>) en utilisant seulement css

Est-il possible en css pur, c'est-à-dire sans ajouter de balises html supplémentaires, de faire un saut de ligne comme <br>? Je veux le retour à la ligne après le <h4> élément, mais pas avant:

HTML

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

CSS

h4 {
  display: inline;
}

J'ai trouvé de nombreuses questions comme celle-ci, mais toujours avec des réponses telles que "use display: block;", ce que je ne peux pas faire lorsque le <h4> doit rester sur la même ligne.

htmlcssstyling
75
Steeven

Cela fonctionne comme ceci:

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

Exemple: http://jsfiddle.net/Bb2d7/

Le truc vient d’ici: https://stackoverflow.com/a/66000/509752 (pour avoir plus d’explications)

127
adriantoine

Essayer

h4{ display:block;}

dans vos css

http://jsfiddle.net/ZrJP6/

6
Philip Kirkbride

Vous pouvez utiliser ::after pour créer un 0px- bloc de hauteur après le <h4>, qui déplace effectivement quoi que ce soit après le <h4> à la ligne suivante:

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>
4
0b10011