Comment créer des sauts de ligne CSS uniquement sans `` ?

Sauts de ligne CSS uniquement : au-delà de

Le défi de créer des sauts de ligne en CSS pur sans introduire de balises HTML supplémentaires a développeurs perplexes. Ceci est particulièrement pertinent lorsque le saut de ligne est souhaité après un élément spécifique, tel qu'un

, tout en conservant l'alignement en ligne de l'élément.

La solution CSS

Heureusement, une solution de contournement CSS intelligente vous permet d'obtenir cet effet souhaité. En tirant parti de la propriété display: inline et en manipulant les propriétés de contenu et d'espace blanc de l'élément, vous pouvez induire un saut de ligne spécifiquement après l'élément ciblé.

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

Copier après la connexion

Dans ce code, la propriété display: inline garantit que le

l'élément reste sur la même ligne. La clé du saut de ligne réside dans le pseudo-élément :after. En définissant son contenu sur le caractère ASCII a, qui représente un saut de ligne, et son espace blanc sur pre, vous forcez un saut de ligne après le

.

Exemple en action

Considérez le code HTML suivant :

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

Copier après la connexion

L'application du CSS ci-dessus à ce code HTML entraîne un saut de ligne seulement après le

élément, en préservant son positionnement en ligne :

<code class="css">li h4 {
  display: inline;
}
li h4:after {
  content: "\a";
  white-space: pre;
}</code>

Copier après la connexion

Conclusion

Cette technique CSS fournit un moyen fiable d'implémenter des sauts de ligne en CSS pur, même après des éléments en ligne. Il offre une solution souhaitable pour les scénarios où les modifications HTML ne sont pas réalisables.

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!