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

Est-il possible dans le plus pur css, c'est à dire sans ajout de balises html, pour faire un saut de ligne comme <br>? Je veux que le saut de ligne après la <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é beaucoup de questions de ce genre, mais toujours avec des réponses comme "utiliser display: block;", que je ne peux pas faire, lorsque l' <h4> doit rester sur la même ligne.

  • Pourquoi est-ce un élément h4? Pourquoi utilisez-vous dans un endroit pareil?
  • Notre curiosité, quelle est la raison pour laquelle vous ne souhaitez pas utiliser <br/>?
  • La raison: j'ai un moche beaucoup d'éléments de la liste. Et je me demandais aussi si une solution existe. Il n'est généralement pas agréable à utiliser balises br entre les éléments (et je vois la tête comme un élément de sa propre)
  • c'est un exemple simplifié. J'ai som texte et les en-têtes dans chaque élément de la liste.
  • double possible de Comment insérer un saut de ligne avant d'un élément à l'aide de CSS
InformationsquelleAutor Steeven | 2012-06-07
  1. 128

    Il fonctionne comme ceci:

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

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

    L'astuce vient d'ici: https://stackoverflow.com/a/66000/509752 (pour avoir plus d'explications)

    • Nice. Ce qui ne l' \a faire?
    • \a moyens de saut de ligne, le caractère U+000A, et white-space: pre indique aux navigateurs de la traiter comme un saut de ligne dans le rendu.
    • Ok, merci @JukkaK.Korpela. Alors pourquoi n'est-il pas rendu comme une ligne de rupture dans la première place? Si cette solution est simple, il ne serait toujours l'emporter sur d'autres espaces blancs commandes.
    • il remplace uniquement la valeur initiale pour white-space sur le :after pseudo-élément, qui ne contient que le saut de ligne. Et il est nécessaire parce que le HTML, par défaut, un saut de ligne dans le contenu d'un élément est équivalent à un espace et à ne pas provoquer un saut de ligne dans le rendu du document.
    • merci, sens & totalement weirds moi au même moment.
    • N'aurais jamais pensé à cela. C'est une honte, on ne peut pas insérer du code HTML si!

    InformationsquelleAutor adriantoine
  2. 7

    Essayer 

    h4{ display:block;}

    dans votre css

    http://jsfiddle.net/ZrJP6/

    • plus quelques une utilisation judicieuse de margin-bottom devrait vous permettre d'y parvenir.
    • Mais si je comprends bien, le h4 doit être sur la même ligne que le texte avant. Avec display:block, il y a un saut de ligne avant le h4.
    • Quoi? margin-bottom mettra le h4 sur la même ligne que le texte précédent?
    • !! Ce n'est pas une solution de travail : votre ligne après sera "display : none" dans les navigateurs comme Safari !!
    InformationsquelleAutor Philip Kirkbride
  3. 4

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

    CSS:

    h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

    HTML:

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

    InformationsquelleAutor 0b10011