Comment définir l'espacement et le placement du texte dans CSS

Lors de la rédaction d'un document, il faut organiser correctement le texte. Cela aidera les utilisateurs à comprendre le flux de contenu et à aider à lire le document. Pour ce faire, il doit y avoir des ajustements de texte appropriés, tels que l'indentation, les espaces de mots, l'alignement, la direction, et plus encore. Plus précisément, CSS nous permet d'utiliser plusieurs propriétés pour ajuster l'espacement et le placement du texte.

Le résultat de cet article sera:

• Qu'est-ce que l'espacement du texte?
• Comment utiliser les propriétés d'espacement du texte CSS
• Quelles sont les propriétés de placement de texte CSS?
• Comment utiliser les propriétés de placement de texte CSS?

Qu'est-ce que l'espacement du texte?

L'espacement du texte fait référence à la quantité d'espace parmi le texte particulier. Plusieurs propriétés CSS sont utilisées pour ajouter des espaces au texte.

Comment utiliser les propriétés d'espacement du texte CSS?

Pour fournir des espaces dans le texte, CSS nous permet d'utiliser différentes propriétés, qui sont énumérées ci-dessous:

• espace blanc
• retrait du texte
• espacement des mots
• hauteur de la ligne
• l'espacement des lettres

Exemple 1: comment informer le texte de l'élément?

CSS "retrait du texte»La propriété est utilisée pour ajouter l'indentation à la première ligne d'un texte. Pour l'utiliser, ajoutez l'élément div avec la classe "intention". Dans cette div, ajouter

étiquette pour l'en-tête, et

Tag pour ajouter un paragraphe.

Html

Propriété CSS Text-Indent

L'espacement de texte offre un look très soigné sur le contenu écrit.
Le texte doit être cassé en morceaux gérables.

Style «indent» div

.indent
Largeur: 350px;
hauteur: 200px;
Texte-indent: 40px;
marge: auto;
rembourrage: 5px;
Color d'arrière-plan: # FFC107;
Border: 10px solide # 9e9e9e;

La liste des propriétés CSS appliquée à la div d'outre est expliquée ci-dessous:

• "largeur”La propriété est utilisée pour le réglage de la largeur de l'élément.
• "hauteur»La propriété est utilisée pour régler la hauteur de l'élément.
• "retrait du texte«La propriété est définie avec la valeur de«40px», Qui représente 40px d'espace au début de la première ligne d'un paragraphe.
• "marge»Propriété avec la valeur définie comme«auto»Génére un espace égal autour de l'élément.
• "rembourrage«Propriété avec la valeur»5px”Ajoutez l'espace de 5px autour du contenu de l'élément.
• "Couleur de l'arrière plan»La propriété spécifie la couleur d'arrière-plan de l'élément.
• "frontière»Propriété avec la valeur définie comme«10px solide # 9E9E9E»Signifie la largeur de bordure, le style de bordure et la couleur de la bordure.

Style «H2» de «indent» div

.indent h2
Décoration du texte: 3px souligné gris;

Le

L'élément de tête de la div d'outre est appliqué le «textaine-décoration«Propriété avec la valeur»3px souligné Gray" où le "3px"Représente la largeur de la ligne,"souligner»Représente la ligne sous le texte, et«gris"Est la couleur.

Sortir

Exemple 2: Comment ajouter des espaces blancs dans l'élément?

Le "Espace blanc de CSS»La propriété spécifie les espaces blancs dans l'élément particulier. Cette propriété est basée sur les valeurs suivantes:

• normal
• nowrap
• se prélever
• pré
• pré-ligne
• espace brisé

Html

Dans CSS, spécifiez la propriété de l'espace blanc avec la valeur "pré-ligne»:

Espace blanc: pré-ligne;

Sortir

Exemple 3: Comment ajouter des espaces entre les mots?

Le CSS "espacement des mots»La propriété est utilisée pour spécifier les espaces entre le texte de l'élément. Cette propriété est associée aux valeurs suivantes:

• longueur
• normal
• initial
• hériter

Regardez l'exemple!

Ainsi, dans cet exemple, nous ajouterons le «espacement des mots«Propriété avec la valeur»30px»:

Espacement des mots: 30px;

Sortir

Exemple 4: Comment ajouter des espaces entre les lignes?

Le "hauteur de la ligne»La propriété est utilisée pour spécifier l'espace vertical entre les lignes de texte.

Ici, dans cet exemple, la propriété Line-Height est utilisée avec la valeur "3EM»:

hauteur de ligne: 3em;

Sortir

Exemple 5: Comment ajouter des espaces entre les caractères de texte?

Le CSS "l'espacement des lettres”La propriété est utilisée pour ajouter les espaces entre les caractères de texte.

Ici, l'élément est fourni avec la propriété d'espacement des lettres avec la valeur de «-1px"Dans CSS:

Espacement des lettres: -1px;

Sortir

Que sont les propriétés de placement de texte?

Le placement de texte fait référence à l'alignement du texte. Il signifie la position texte à gauche, à droite, et bien d'autres, dans le cadre du point d'insertion du texte.

Comment utiliser les propriétés de placement de texte CSS?

Voici les propriétés qui peuvent être utilisées pour ajuster le placement de texte.

• texte-alignement-allonge
• alignement de texte
• alignement vertical
• direction
• Unicode-bidi

Exemple 1: Comment aligner la dernière ligne du texte de l'élément?

Le CSS "texte-alignement-allonge”La propriété est utilisée pour ajuster l'alignement de la dernière ligne du texte. Dans notre cas, nous avons défini la propriété text-aligne-allonge comme «droite»:

Text-aligne-Last: à droite;

Sortir

Exemple 2: Comment aligner le texte horizontalement dans HTML?

Le CSS "alignement de texte»La propriété est utilisée pour aligner le texte horizontalement. Par exemple, nous avons défini sa valeur comme «droite»:

Texte-aligne: à droite;

Sortir

Exemple 3: Comment aligner le texte verticalement dans HTML?

Le "alignement vertical«La propriété du CSS est utilisée pour aligner le texte verticalement.

Pour utiliser cette propriété, ajoutez un «

»Élément pour ajouter un paragraphe au document souhaité. Ce paragraphe se compose des éléments à certains moments avec ID comme «encoupé»:

Alignement du texte fournit le lecteurs avec un visuellement
texte logique.

Dans CSS, l'élément avec ID "encoupé«Est stylé avec les propriétés suivantes:

#Superscript
Color en arrière-plan: RVB (3, 162, 11);
Adigne vertical: Super;

Ici:

• "Couleur de l'arrière plan»La propriété est utilisée pour définir la couleur d'arrière-plan de l'élément.
• "alignement vertical" valeur de la propriété "super«Alignera le texte légèrement verticalement au-dessus.

Sortir

Exemple 4: Comment changer la direction du texte?

Le CSS "direction»La propriété est utilisée pour modifier la direction du texte de l'élément.

Dans CSS, la propriété de direction avec la valeur "rtl”Est ​​spécifié pour faire la direction de l'élément de droite à gauche:

Direction: RTL;

Sortir

Exemple 5: Comment gérer le texte bidirectionnel en HTML?

Pour gérer le texte bidirectionnel dans un document, le CSS "Unicode-bidi»La propriété est utilisée. Le texte bidirectionnel fait référence au document ayant du texte dans les deux sens, à droite à gauche et à gauche à droite. Le texte bidirectionnel existe généralement dans le document ayant plusieurs langues, qui peuvent être définies en utilisant le «direction" propriété.

Pour la démonstration, ajoutez le code suivant dans le fichier CSS:

Direction: RTL;
Unicode-bidi: Bidi-Override;

Ici:

• "direction"La propriété est définie avec la valeur"rtl”Qui indique la direction droite à gauche du texte.
• "Unicode-bidi»Propriété avec la valeur définie comme«bidi-override"Est utilisé pour spécifier si le texte fourni doit être remplacé pour prendre en charge plusieurs langues dans un document.

Sortir

Il s'agissait de régler l'espacement et le placement du texte dans CSS.

Conclusion

Lors de la rédaction d'un document, il est très nécessaire de garder à l'esprit le format et le style du document. Un document bien formaté ne produit aucun problème de lisibilité. Pour ce faire, CSS nous fournit des propriétés différentes qui aident à l'espacement et au placement du texte en HTML. Certaines des propriétés sont «alignement de texte","direction","texte-alignement-allonge", et plus. Ce message a démontré diverses propriétés CSS qui aident dans l'alignement du texte et les paramètres de placement des documents HTML.