Comment définir un remplissage vide dans les éléments de texte en CSS ?

Comment définir le remplissage vide dans les éléments de texte en CSS ? Ce que cet article vous apporte, c'est de présenter la méthode de définition de remplissage vide d'éléments de texte à l'aide de CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Aujourd'hui, je vais vous présenter comment définir le remplissage des espaces dans les éléments de texte via l'attribut white-space du CSS. Jetons un coup d'œil à l'attribut white-space.

L'attribut white-space contrôle la manière dont le texte est géré sur l'élément auquel il est appliqué, définissant la manière dont les espaces dans l'élément sont gérés.

Ci-dessous, nous créons un tel code HTML :

<div>
   A bunch of words you see.
</div>

Définissez la largeur du div sur 100px. Avec une taille de police raisonnable, ajoutez plus de texte pour qu'il tienne à 100 px. Ne fait rien, la valeur par défaut des espaces blancs est normale et le texte sera renvoyé à la ligne.

div {
  white-space: normal; 
}

Jetons un coup d'œil au rendu :

Si vous souhaitez empêcher le retour à la ligne du texte, vous pouvez utiliser espace blanc : nowrap;

Attention : dans l'exemple de code html en haut de cet article, il y a en fait deux sauts de ligne, un avant la ligne de texte et un après la ligne de texte, ils permettent au texte d'être sur sa propre ligne (dans le code). Lorsque le texte est affiché dans le navigateur, c'est comme si ces sauts de ligne étaient supprimés. Les espaces supplémentaires avant la première lettre sont également supprimés. Si nous voulons forcer le navigateur à afficher ces nouvelles lignes et ces caractères d'espacement supplémentaires, nous pouvons utiliser white-space: pre;

pre est appelé Parce que cela se comporte comme si vous enveloppiez le texte dans une balise

(les balises pre peuvent gérer les espaces et les nouvelles lignes par défaut). En HTML, les espaces conviennent parfaitement, le texte n'est pas renvoyé à la ligne jusqu'à ce que la balise de fermeture apparaisse dans le code. Ceci est particulièrement utile lors de l'affichage littéral du code, bénéficiant d'un avantage esthétique grâce à certains formats (et lorsque certains moments sont absolument critiques, comme dans les langages qui reposent sur des espaces blancs !)

Peut-être aimez-vous la façon dont le pré gère les espaces blancs et les sauts de ligne, mais vous devez envelopper le texte au lieu de potentiellement le séparer de son conteneur parent. Ce serait white-space: pre-wrap;:

Enfin, white-space: pre-line; brisera la ligne là où le code est interrompu, mais sera quand même supprimé. hors de la zone d’espace supplémentaire.

Fait intéressant, le saut de ligne à la fin n'est pas respecté. Selon la spécification CSS 2.1 : « Supprimer les lignes aux nouvelles lignes préservées, en remplissant les cases de ligne si nécessaire. » Alors peut-être que cela a du sens.

Voici un tableau pour comprendre le comportement de toutes les différentes valeurs :

En CSS3, la propriété white-space suivra en fait ce graphique et sera Propriétés mapper vers text-space-collapse et text-wrap en conséquence.

Compatibilité

Le numéro dans le tableau indique le premier numéro de version du navigateur qui prend en charge cet attribut.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!