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.

<p>1. Règles d'espace

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

<p>

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

<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.

<p>La sortie du navigateur est la suivante.

hello world

<p>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.

<p>Si vous souhaitez que les espaces soient affichés tels quels, vous pouvez utiliser la balise <pre class="brush:php;toolbar:false">&lt;/code&gt;. &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;◡◡hello◡◡world◡◡</pre></pre><div class="contentsignin">Copier après la connexion</div></div><p>Vous pouvez également utiliser l'entité HTML <code> pour représenter les espaces.

<p>  hello  world  </p>

<p>2. Caractères d'espace

<p>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).

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

<p>hello
world</p>

<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

<p> Par conséquent, les sauts de ligne dans le texte ne sont pas valides (sauf si le texte est placé dans la balise <pre class="brush:php;toolbar:false">&lt;/code&gt;). &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;p&gt;hello&lt;br&gt;world&lt;/p&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>Le code ci-dessus utilise la balise <code><br> pour indiquer explicitement les sauts de ligne.

<p>3. L'attribut d'espace blanc de CSS

<p>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.

<p>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

<p>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>

<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.

<p>Ensuite, le conteneur <p> 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;
}

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

<p>

<p>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

<p>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;
}

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

<p>

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

3.3 espace blanc : Lorsque l'attribut pre

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

</code>. </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

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

<p>

<p>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

<p>white-spaceLorsque l'attribut est pre-wrap, il est essentiellement traité de la même manière que la balise

</code> La seule différence est. que lorsque la largeur du conteneur est dépassée, un saut de ligne se produit. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
  white-space: pre-wrap;
}

Copier après la connexion