Comment gérer les espaces en CSS

attribut d'espace blanc

CSS fournit un attribut d'espace blanc qui peut fournir une manière plus précise de gérer les espaces. Cet attribut a six valeurs au total, en plus d'un héritage commun (héritant de l'élément parent), les cinq valeurs restantes sont présentées ci-dessous.

1. white-space: normal

La valeur par défaut de l'attribut white-space est normal, ce qui signifie que le navigateur gère les espaces de manière normale.

html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

Dans le code ci-dessus, il y a deux espaces devant le texte, un mot long et un caractère de nouvelle ligne à l'intérieur.

Les espaces en début de texte sont ignorés. Étant donné que le conteneur est trop étroit, le premier mot déborde du conteneur et s'enveloppe d'un espace après celui-ci. Les sauts de ligne dans le texte sont automatiquement convertis en espaces.

Recommandations de tutoriel associées :

Tutoriel vidéo CSS, adresse d'apprentissage : https://www.php.cn/course/list/12.html

2. white-space: nowrap

Lorsque l'attribut white-space est nowrap, le retour à la ligne ne se produira pas en raison du dépassement de la largeur du conteneur.

p {
    white-space: nowrap;
}

Tout le texte est affiché sur une seule ligne sans retour à la ligne.

3. white-space: pre

Lorsque l'attribut white-space est pre, il sera traité de la même manière que la balise

 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
    white-space: pre;
}

Copier après la connexion

Le résultat ci-dessus est exactement le même que le texte original, tous les espaces et nouvelles lignes sont conservés.

4. espace blanc : pré-enveloppement

Lorsque l'attribut espace blanc est pré-enveloppement, il est essentiellement traité de la même manière que l'attribut < pre>, la seule différence est que lorsque la largeur du conteneur est dépassée, un retour à la ligne se produit.

p {
    white-space: pre-wrap;
}

Les espaces au début du texte, les espaces internes et les sauts de ligne sont tous conservés, et les sauts de ligne se produisent au-delà du conteneur.

5. espace blanc : pré-ligne

Lorsque l'attribut espace blanc est pré-ligne, cela signifie conserver le caractère de nouvelle ligne. À l'exception du caractère de nouvelle ligne, qui sera affiché tel quel, tout le reste est cohérent avec la règle white-space:normal.

p {
    white-space: pre-line;
}

Sauf que les sauts de ligne à l'intérieur du texte ne sont pas convertis en espaces, les autres règles de traitement sont cohérentes avec la normale. Ceci est utile pour les textes de type poésie.

Pour plus de contenu lié à la programmation, veuillez faire attention à la colonne Introduction à la programmation sur le site Web PHP chinois !

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!