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 : //m.sbmmt.com/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;
}