Comment réaliser des sauts de ligne en CSS sans balises HTML ?

Sauts de ligne CSS sans balises HTML

La réalisation de sauts de ligne uniquement avec CSS, sans introduire d'éléments HTML supplémentaires, peut être obtenue en utilisant la méthode suivante :

Problème :

Dans une liste à puces, vous souhaitez avoir un saut de ligne après un

mais pas avant, en conservant l'élément

sur la même ligne. Les solutions conventionnelles suggèrent de définir display: block; pour le

, mais cela rompt la nature en ligne de l'élément.

Solution CSS :

La solution réside dans l'utilisation de pseudo-éléments CSS pour introduire un saut de ligne. Voici le code CSS :

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

Explication :

• affichage : en ligne ; conserve le

  sur la même ligne qu'un autre texte.

• h4:after crée un pseudo-élément après le

  élément.

• contenu : "a" ; injecte un caractère de saut de ligne dans le pseudo-élément.
• white-space: pre; préserve le saut de ligne.

Démo :

Un exemple de cette technique peut être trouvé ici : http://jsfiddle.net/Bb2d7/

Origine :

L'inspiration pour cette astuce est venue de cette réponse StackOverflow : https://stackoverflow.com/a/66000/509752

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!