Maison >interface Web >tutoriel CSS >Pouvez-vous forcer un saut de ligne après un élément `` en ligne avec CSS uniquement ?

Pouvez-vous forcer un saut de ligne après un élément `` en ligne avec CSS uniquement ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-30 00:57:291044parcourir

Can You Force a Line Break After an Inline `` Element with CSS Only?

Créer des sauts de ligne avec CSS

Pouvez-vous réaliser un saut de ligne en utilisant uniquement CSS, sans ajouter de balises HTML ? Le but est d'insérer un saut de ligne après un

élément sans affecter son statut en ligne.

Solution :

Pour ce faire, suivez ces étapes :

  1. Appliquer display: inline; au

    élément pour le conserver sur la même ligne.

  2. Créez un pseudo-sélecteur pour

    :after et ajoutez les styles suivants :

    • content: "a"; pour insérer un espace invisible et insécable à la fin du

      élément.

    • espace blanc : pré ; pour conserver tout espace de début dans le texte qui suit le

    .

Exemple :

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

Par en ajoutant ce CSS, un saut de ligne apparaîtra après le

élément, en conservant son comportement d'affichage en ligne.

Pour plus d'explications, reportez-vous à : 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!

Déclaration:
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