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

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

Barbara Streisand
Barbara Streisandoriginal
2024-10-30 19:35:30919parcourir

Can You Force a Line Break After an Element Using Only CSS?

Création de sauts de ligne avec CSS

Besoin d'un saut de ligne, mais vous ne souhaitez pas ajouter de balises HTML supplémentaires ? CSS a ce qu'il vous faut ! Voici comment réaliser un saut de ligne après un élément spécifique comme un

 :

Question :

Pouvez-vous forcer un saut de ligne après un élément en utilisant uniquement du CSS , sans ajouter de balises HTML ?

Défi :

Supposons que nous ayons un

élément niché dans un
  •  :

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

    Nous voulons un saut de ligne après l'élément

    mais pas avant, tout en le gardant en ligne. Cependant, le réglage display: block; n'est pas une option car cela perturberait le positionnement de l'élément.

    Solution :

    Avec un CSS intelligent, nous pouvons y parvenir :

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

    Explication :

    • affichage : en ligne ; conserve le

      élément sur la même ligne.

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

      et insère le caractère Unicode "a" (saut de ligne).

    • white-space: pre; garantit que le saut de ligne inséré est visible.

    Exemple :

    Découvrez ce violon pour une démo en direct : http://jsfiddle.net/Bb2d7 /

    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