Maison > Article > interface Web > Comment définir l'espacement des caractères en CSS
Comment définir l'espacement des caractères en CSS
- 青灯夜游original
- 2021-10-12 16:26:4991055parcourir
Comment définir l'espacement des mots en CSS : 1. Utilisez l'attribut letter-spacing, la syntaxe "letter-spacing : spacing value ;" 2. Utilisez l'attribut word-spacing, la syntaxe "word-spacing : spacing value ; ".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir l'espacement des mots en CSS ? Ajuster l'espacement entre le texte ? L’article suivant vous le présentera.
Méthode 1 : utilisez la propriété letter-spacing - espacement des caractères
propriété letter-spacing pour augmenter ou diminuer l'espace entre les caractères (espacement des caractères), cette propriété définit la quantité d'espace insérée entre les zones de caractères de texte. Étant donné que les glyphes de caractères sont généralement plus étroits que leurs zones de caractères, la spécification d'une valeur de longueur ajuste l'espacement habituel entre les lettres. Par conséquent, la valeur normale équivaut à une valeur de 0.
Pour cet attribut : chaque caractère chinois est considéré comme un « caractère », et chaque lettre anglaise est également considérée comme un « caractère » ! Chacun doit donc y prêter une attention particulière.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width:500px;
height: 500px;
margin: 50px auto;
}
p{
letter-spacing:20px;
}
</style>
</head>
<body>
<div class="demo">
<p>a b c d 你 好 a ！</p>
<p>ab cd 你好a！</p>
</div>
</body>
</html>
Méthode 2 : Utilisez l'attribut d'espacement des mots - l'espacement des mots
L'attribut d'espacement des mots augmente ou diminue l'espace entre les mots (c'est-à-dire l'espacement des mots dans ce cas) ; attribut, " "Mot" est défini comme une chaîne entourée de caractères d'espacement.
C'est-à-dire que cet attribut ajuste l'espacement en fonction des espaces :
Si plusieurs lettres sont reliées entre elles, elles seront considérées comme un seul mot par espacement des mots ;
Si les caractères chinois sont séparés par des espaces ; , alors les multiples caractères chinois séparés sont considérés comme des mots différents et l'attribut d'espacement des mots est valide à ce moment-là.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width:500px;
height: 500px;
margin: 50px auto;
}
p{
word-spacing:20px;
}
</style>
</head>
<body>
<div class="demo">
<p>a b c d 你 好 a ！</p>
<p>ab cd 你好a！</p>
</div>
</body>
</html>
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)
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!