Comment gérer les espaces en CSS (exemple)

Le contenu de cet article explique comment traiter les espaces en CSS (exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Règles d'espace

Les espaces dans le code HTML sont généralement ignorés par les navigateurs.

<p>◡◡hello◡◡world◡◡</p>

Ce qui précède est une ligne de code HTML, avec deux espaces chacun à l'avant, à l'intérieur et à l'arrière du texte. Pour faciliter l'identification, le symbole semi-circulaire ◡ est utilisé ici pour représenter les espaces.

La sortie du navigateur est la suivante.

hello world

Comme vous pouvez le constater, les espaces avant et après le texte seront ignorés, et les espaces consécutifs internes ne seront comptés que pour un. C'est la règle de base permettant aux navigateurs de gérer les espaces.

Si vous souhaitez que les espaces soient affichés tels quels, vous pouvez utiliser la balise e03b848252eb9375d56be284e690e873.

<pre class="brush:php;toolbar:false">◡◡hello◡◡world◡◡

Vous pouvez également utiliser l'entité HTML pour représenter les espaces.

<p>  hello  world  </p>

2. Caractères d'espace

Les règles HTML pour le traitement des espaces sont applicables à une variété de caractères. En plus de la barre d'espace normale, elle comprend également des caractères de tabulation (t) et des caractères de nouvelle ligne (r et n).

Le navigateur convertira automatiquement ces symboles en touches d'espace ordinaires.

<p>hello
world</p>

Dans le code ci-dessus, le texte contient un caractère de nouvelle ligne, qui est considéré comme un espace par le navigateur, et le résultat de sortie est le suivant.

hello world

Par conséquent, les sauts de ligne dans le texte ne sont pas valides (sauf si le texte est placé dans la balise e03b848252eb9375d56be284e690e873).

<p>hello<br>world</p>

Le code ci-dessus utilise la balise 0c6dc11e160d3b678d68754cc175188a pour indiquer explicitement les sauts de ligne.

3. L'attribut d'espace blanc de CSS

Le traitement de l'espace en langage HTML est essentiellement un filtrage direct. Un tel traitement est trop grossier et ignore complètement le fait que les espaces à l’intérieur du texte original peuvent avoir un sens.

CSS fournit un attribut white-space qui peut fournir une manière plus précise de gérer les espaces. Cet attribut a six valeurs au total, à l'exception d'un inherit commun (hérité de l'élément parent. Les cinq valeurs restantes sont présentées ci-dessous).

3.1 espace blanc : normal

white-spaceLa valeur par défaut de l'attribut est normal, indiquant que le navigateur gère les espaces de manière normale.

<p>◡◡hellohellohello◡hello
world
</p>

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.

Ensuite, le conteneur e388a4556c0f65e1904146cc1a846bee précise une largeur plus petite. Pour une identification plus facile, la couleur d’arrière-plan est définie sur rouge.

p {
  width: 100px;
  background: red;
}

L'effet d'affichage est comme indiqué ci-dessous.

Comme vous pouvez le constater, 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.

3.2 espace blanc : nowrap

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

p {
  white-space: nowrap;
}

L'effet d'affichage est comme indiqué ci-dessous.

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

3.3 espace blanc : Lorsque l'attribut pre

white-space est pre, il sera traité de la même manière que la balise e03b848252eb9375d56be284e690e873.

p {
  white-space: pre;
}

L'effet d'affichage est comme indiqué ci-dessous.

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

3.4 espace blanc : pré-enveloppement

white-spaceLorsque l'attribut est pre-wrap, il est essentiellement traité de la même manière que la balise e03b848252eb9375d56be284e690e873 La seule différence est. que lorsque la largeur du conteneur est dépassée, un saut de ligne se produit.

p {
  white-space: pre-wrap;
}

L'effet d'affichage est comme indiqué ci-dessous.

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

3.5 espace blanc : pré-ligne

white-space Lorsque l'attribut est pre-line, cela signifie conserver le saut de 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;
}

L'effet d'affichage est comme indiqué ci-dessous.

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 normal. Ceci est utile pour les textes de type poésie.

Articles connexes recommandés :

balise div : implémentation du centrage horizontal et du centrage vertical (avec code)

Code pour la conversion de chaîne à l'aide de l'attribut text-transform en CSS

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!