Effets de texte dans CSS

Un site Web se compose de divers types de contenu tels que des images, du texte, des animations et bien d'autres. En plus d'embellir le contenu du site Web, vous pouvez également contrôler son comportement. Cela peut être fait en ajoutant certains effets en utilisant diverses propriétés CSS.

Dans ce guide, nous expliquerons comment vous pouvez ajouter des effets au texte apparaissant sur votre site Web.

Commençons.

Effets de texte dans CSS

Vous pouvez ajouter des effets sur le texte apparaissant sur les pages Web en utilisant les différentes propriétés fournies par CSS. Les propriétés CSS liées au texte sont les suivantes.

1. Propriété de superficie de texte
2. Propriété en mode d'écriture
3. propriété de mot
4. Propriété de rupture de mots

Ci-dessous, nous avons discuté de chacun d'eux en profondeur.

Propriété de superficie de texte

La propriété de superficie de texte décrit ce qui arrive au texte débordant qui est invisible pour le lecteur. Ce n'est pas une propriété autonome et doit être utilisé avec l'espace blanc: Nowrap et débordement: propriétés cachées.

Syntaxe

Text-overflow: Clip | ellipse;

La valeur de clip est une valeur par défaut qui coupe le texte débordé, tandis que la valeur de l'ellipsis coupe également le texte et affiche une ellipse ou trois points à la place du texte débordé.

Exemple
Cet exemple démontre le fonctionnement de la propriété de superficie de texte.

Html

Text-overflow: Clip

Cet exemple montre la valeur clip de la propriété de superficie de texte.

Text-déplore: ellipsesis

Cet exemple démontre la valeur de l'ellipse de la propriété de superficie de texte.

Dans le code ci-dessus, nous en avons simplement créé deux

des éléments et y ont placé un long texte pour démontrer le fonctionnement des deux valeurs de la propriété de superficie de texte.

CSS

.p1
Espace blanc: Nowrap;
débordement caché;
Text-overflow: Clip;
Largeur: 190px;
Border: 1px noir solide;

.p2
Espace blanc: Nowrap;
débordement caché;
Text-overflow: ellipsis;
Largeur: 190px;
Border: 1px noir solide;

P: Hover
débordement: visible;

Pour les deux paragraphes, nous avons réglé le espace blanc propriété nowrap et débordement propriété caché. Cependant, le premier

L'élément montre le fonctionnement de la valeur de clip de la propriété de superficie de texte et le second

L'élément démontre la valeur de l'ellipse de la propriété de superficie de texte. En plus de cela à chaque fois que l'utilisateur plane sur les paragraphes, le texte caché sera affiché.

Sortir

Le texte débordant est géré à l'aide de la propriété de superficie de texte.

Propriété en mode d'écriture

Cette propriété spécifie la direction du texte affiché sur les pages Web. Il y a deux directions possibles qui sont horizontales ou verticales.

Syntaxe

Mode d'écriture: Vertical-LR | Vertical-RL | TB horizontal | hériter;

Le texte affiché verticalement en utilisant le lr vertical la valeur est lue de gauche à droite, verticalement.
Le texte affiché verticalement en utilisant le rl vertical la valeur est affichée de droite à gauche, verticalement.

En attendant, la valeur bizarrerie horizontale Affiche le texte horizontalement de haut en bas.

Exemple
Considérez l'exemple ci-dessous.

Html

Exemple de TB horizontal

Exemple de LR vertical

Exemple de RL vertical

Ici, nous en avons créé trois

Éléments pour illustrer le fonctionnement de différentes valeurs de mode d'écriture.

CSS

p
Border: 1px noir solide;
Largeur: 200px;

.tb
Mode d'écriture: TB horizontal;
hauteur: 160px;

.g / D
mode d'écriture: LR vertical;
hauteur: 160px;

.rl
mode d'écriture: Vertical-RL;
hauteur: 160px;

En utilisant les différentes classes affectées à chacun des

élément nous définissons différents modes d'écriture pour eux.

Sortir

Le texte a été affiché en utilisant divers modes d'écriture.

propriété de mot

Quand un mot est trop long, il déborde au-delà de la zone spécifiée d'un élément, en utilisant la propriété de mot-emploi, ce mot est divisé et enroulé autour de la ligne suivante.

Syntaxe

Word-Wrap: Normal | Break-word | hériter;

La valeur normale divise le mot à des points spécifiés, en attendant la valeur de rupture brise les mots incassables.

Exemple
Considérez l'exemple ci-dessous pour comprendre le fonctionnement de la propriété Word-Wrap.

Html

Sans propriété de mot

Le contenu de ce paragraphe est
veeeerrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyy lOOOOOOOOOOOOOOOOOOOOnnnnnnnnnnngggggggggggggggggggg

Avec mot-mot: mot de rupture;

Le contenu de ce paragraphe est
veeeerrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyy lOOOOOOOOOOOOOOOOOOOOnnnnnnnnnnngggggggggggggggggggg

Ici, nous en avons créé deux

des éléments et y ont placé de longs mots.

CSS

.p1
Largeur: 11EM;
Border: 2px solide # 000000;

.p2
Largeur: 11EM;
Border: 2px noir solide;
Word-Wrap: Break-Word;

Dans le code ci-dessus, nous donnons les deux

Éléments une certaine largeur et frontière et nous appliquons également la propriété Word-Wrap sur la seconde

élément.

Sortir

La propriété Word-Wrap fonctionne correctement.

Propriété de rupture de mots

La propriété de rupture de mots gère comment les mots doivent se séparer à la fin d'une ligne.

Syntaxe

Bris de mot: Keep-All | Break-all | Normal | hériter;

La valeur de conservation divise un mot de manière par défaut, tandis que la valeur de rupture divise les mots à des points aléatoires pour éviter le débordement.

Exemple
Considérez l'exemple ci-dessous pour comprendre le fonctionnement de la propriété Word-Break.

Html

Bris de mot: Keep-tout;

Apprentissage des effets de texte dans CSS

Bris de mot: Break-All;

Effets du texte d'apprentissage dans CSS

Ici, nous en avons simplement créé deux

éléments et y ont placé du contenu.

CSS

.p1
Largeur: 120px;
Border: 2px solide # 000000;
Bris de mot: Keep-tout;

.p2
Largeur: 120px;
Border: 2px solide # 000000;
Bris de mot: Break-All;

Le premier paragraphe a été attribué à la valeur de maintien, en attendant le deuxième paragraphe a été attribué.

Sortir

Les différentes valeurs de la propriété de rupture de mots sont vérifiées et fonctionnent correctement.

Conclusion

Vous pouvez ajouter des effets sur le texte apparaissant sur les pages Web en utilisant les propriétés fournies par CSS telles que la propriété de superficie de texte, la propriété en mode d'écriture, la propriété de word-complexe et la propriété de rupture de mots. La propriété de superficie de texte décrit ce qui arrive au texte débordant, la propriété en mode d'écriture spécifie la direction du texte, la propriété de mot À la fin d'une ligne. Toutes ces propriétés sont expliquées en profondeur dans ce guide avec pertinent