Maison > interface Web > tutoriel CSS > Comment définir l'espacement des caractères en CSS

Comment définir l'espacement des caractères en CSS

青灯夜游
Libérer: 2021-10-12 16:26:49
original
91449 Les gens l'ont consulté

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 ; ".

Comment définir l'espacement des caractères en CSS

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>
Copier après la connexion

Comment définir lespacement des caractères en CSS

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>
Copier après la connexion

Comment définir lespacement des caractères en CSS

(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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal