CSS est une feuille de style en cascade qui fournit différentes propriétés aux éléments HTML à des fins de style. Il y a des centaines de propriétés, comme le texte, la bordure, la marge, le rembourrage, la largeur, la hauteur, et plus encore. Lors de l'écriture d'un grand paragraphe en HTML, il peut y avoir un espace indésirable entre le texte, ou parfois il est nécessaire d'afficher le texte de manière spécifique. Dans un tel scénario, utilisez le CSS "espace blanc»Propriété pour contrôler les espaces blancs dans le texte.

Dans ce manuel, la propriété CSS White Space sera discutée avec des exemples. Alors, commençons!

Qu'est-ce que la propriété CSS White Space?

Le CSS "espace blanc»La propriété gère les espaces blancs à l'intérieur de l'élément.

Syntaxe

La syntaxe de la propriété White Space est mentionnée ci-dessous. Vous pouvez attribuer une valeur en fonction de vos préférences:

Espace blanc: Nowrap | pré-wrap | normal | Initial | Hériter | Pre | pré-ligne;

Donc, avant de nous précipiter dans la discussion, apprenons les valeurs associées à cette propriété une par une!

Espace blanc: Nowrap

La propriété de l'espace blanc avec la valeur "nowrap»Effondre les espaces blancs en une seule ligne. Il élimine les ruptures de ligne dans la source et n'enroule jamais le texte. De plus, le texte se poursuit jusqu'à la survenue du
étiqueter.

Exemple

Passons à l'exemple pratique, dans lequel nous allons écrire quelques paragraphes. Ceux-ci sont ensuite appliqués avec la propriété White Space avec ses différentes valeurs et voient leurs résultats.

Html

Dans l'élément corporel du fichier HTML:

• Ajoutez un div avec le nom de classe "récipient".
• Puis ajouter

  Tag et

  Tag avec une classe nommée "titre".

• Après cela, un

  La balise est placée pour ajouter un paragraphe sur la page Web.

Note: Pour vérifier le fonctionnement de différentes valeurs de propriété dans l'espace blanc, nous avons placé des espaces blancs à l'intérieur du paragraphe:

La propriété de l'espace blanc

Espace blanc: Nowrap:

Nous sommes une équipe. Nous travaillons ensemble pour une mission commune. Nous sommes une équipe.
Nous travaillons ensemble pour une mission commune. Nous sommes une équipe.

À l'intérieur de l'étiquette de tête de HTML, ajoutez la balise.

CSS

corps
Color d'arrière-plan: # A9B6EB;

Le "Couleur de l'arrière plan”La propriété est utilisée pour définir la couleur de fond de l'élément corporel.

Style «conteneur» div

.récipient
hauteur: 200px;
Couleur: RVB (19, 1, 56);

Voici la description du code donné:

• ".récipient"Indique le conteneur de classe Div dans lequel le«."Le signe est appelé sélecteur de classes.
• "hauteur»La propriété définit la hauteur de l'élément à 200px.
• "couleur»La propriété spécifie la couleur de la police.

Classe de «rubrique» de style

.En-tête
Texte-aligne: Centre;

Ensuite, ajoutez certaines propriétés de style aux en-têtes H1 et H2 qui sont expliquées ci-dessous:

• ".titre»Est utilisé pour accéder à la classe de

  et

  éléments.

• "alignement de texte»Propriété avec la valeur définie comme«centre«Ra centrer le texte.

Style «A» Classe

.un
Espace blanc: Nowrap;

• ".un»Fait référence à la classe du paragraphe.
• "espace blanc»Propriété avec la valeur définie comme«nowrap»Effondrera tous les espaces blancs.

Comme nous pouvons le voir dans l'écran de sortie en dessous. La valeur Nowrap a effondré tous les espaces blancs du paragraphe, et le texte n'est pas du tout enveloppé:

Espace blanc: normal

C'est la valeur par défaut de la propriété d'espace blanc. Il effondre les espaces blancs en un seul caractère et enveloppe le texte à la ligne suivante en cas de besoin.

Syntaxe

Dans CSS, attribuez la valeur "normal«À la propriété White Space:

Espace blanc: normal;

On peut observer que les espaces blancs sont effondrés et que le texte est enveloppé. Les lignes sont cassées comme pour remplir l'espace ci-dessous:

Espace blanc: pré

La séquence d'espace est conservée et les lignes sont rompues lorsque le caractère Newline est rempli ou sur
. Plus précisément, le «pré”La valeur préserve les deux ruptures de ligne et les espaces.

Syntaxe

Pour l'utiliser, affectez la valeur pré-propriété à la propriété White Space comme mentionné ci-dessous:

Espace blanc: pré;

Sortir

Espace blanc: pré-ligne

Tout en utilisant le «pré-ligne"Les espaces blancs sont effondrés et les lignes sont cassées sur les caractères de Newline, à
étiqueter. De plus, il enveloppe également le texte,

Syntaxe

Dans CSS, la propriété White Space sera attribuée à la valeur comme mentionné ci-dessous:

Espace blanc: pré-ligne;

En définissant la valeur de pré-ligne sur la propriété White Space, le résultat ressemblera à ceci:

Espace blanc: hériter

La valeur "hériter»Indique que cette propriété devrait hériter de la valeur de son élément parent.

Syntaxe

Voici la syntaxe pour spécifier la valeur de la propriété de l'espace blanc comme hérité:

Espace blanc: héritage;

Le code ci-dessus en résultera comme indiqué dans l'image ci-dessous:

Espace blanc: pré-wrap

Le "se prélever»Valeur préserve les espaces, les onglets et la nouvelle ligne. Il enveloppe également le texte.

Syntaxe

Espace blanc: pré-wrap;

Sortir

Espace blanc: initial

"initial»Indique que la propriété CSS doit être définie sur sa valeur par défaut. Cette valeur peut être attribuée à la propriété d'espace blanc comme suit:

Espace blanc: initial;

Sortir

Conseil bonus

Dans CSS, il existe d'autres valeurs de propriété dans l'espace blanc que vous pouvez explorer davantage:

• Espace blanc: retourne
• Espace blanc: revêtement
• Espace blanc: Espaces blancs
• Espace blanc: non set

Nous avons appris les différentes valeurs des propriétés de l'espace blanc et leur utilisation.

Conclusion

Dans CSS, le «espace blanc»La propriété définit comment gérer les espaces blancs dans un élément. Par exemple, parfois un code source de document est écrit d'une manière qui n'est pas pour le rendu final. Il a besoin de quelques indentations et d'espaces. Pour les définir en conséquence, CSS nous permet d'utiliser la propriété White Space ayant des valeurs différentes. Dans cet article, nous avons expliqué les valeurs de la propriété de l'espace blanc et leur comportement avec des exemples.