Maison > interface Web > tutoriel CSS > Comment créer des sauts de ligne CSS uniquement sans `` ?

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

Barbara Streisand
Libérer: 2024-10-29 14:37:02
original
1051 Les gens l'ont consulté

How to Create CSS-Only Line Breaks Without ``?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal