recherche
Maisoninterface Webtutoriel CSSComment définir l'espacement du texte en CSS ?

Comment définir l'espacement du texte en CSS ?

Sep 27, 2018 am 11:12 AM
cssletter-spacingword-spacing字间距

Comment ajuster l'espacement entre le texte CSS et le texte ? Je pense que de nombreux amis se poseront de telles questions. Ce chapitre vous présentera la méthode de définition de l'espacement du texte en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment définir l'espacement du texte en CSS ?

1. attribut d'espacement des mots CSSDéfinir l'espacement des mots (espacement entre les mots)

La propriété d'espacement des mots augmente ou diminue l'espace entre les mots (c'est-à-dire l'espacement des mots dans cette propriété, "mot" est défini) ; comme Une chaîne entourée d'espaces. 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, les caractères chinois séparés seront considérés comme un seul mot ; mot. Pour différents mots, l'attribut d'espacement des mots est désormais en vigueur.

Syntaxe d'espacement des mots :

word-spacing:值;

Les valeurs d'attribut prises en charge par cet attribut sont :

normal : définit l'espace standard entre mots, valeur par défaut.

longueur : Définit l'espace fixe (valeur de longueur) entre les mots.

inherit : Spécifie que la valeur de l'attribut d'espacement des mots doit être héritée de l'élément parent.

Remarque :

S'il est spécifié comme valeur de longueur, l'intervalle habituel entre les mots sera ajusté, par conséquent, normal équivaut à le définir sur 0. Permet de spécifier des valeurs de longueur négatives, ce qui provoque un rapprochement des mots.

Jetons un coup d'œil à l'exemple de attribut d'espacement des mots définissant l'espacement des mots pour ressentir intuitivement comment cet attribut définit l'espacement entre les mots :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css word-spacing属性设置字间距</title>
		<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>

Le contenu dans les deux balises p est la même. La différence est que chaque caractère de la première balise p est séparé par des espaces, et tous les caractères de la deuxième balise p ne sont pas séparés par des espaces. distance d'espacement jusqu'à 20px :

Comment définir lespacement du texte en CSS ?

2. lettre css -attribut d'espacement Définir l'espacement des caractères

L'attribut d'espacement des lettres augmente ou diminue l'espace entre les caractères (espacement des caractères). Cet attribut définit la quantité d'espace à insérer entre le texte. cases de caractères. É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.

Les valeurs d'attribut prises en charge par cet attribut sont similaires à l'attribut word-spacing. Vous pouvez vous référer à l'attribut word-spacing.

Regardons l'exemple de définition de l'espacement des mots à l'aide de l'attribut letter-spacing :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css letter-spacing属性设置字间距</title>
		<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>
Rendu :


Comment définir lespacement du texte en CSS ?

Nous pouvons constater que par rapport à l'attribut word-spacing, l'attribut letter-spacing définit l'espacement entre le texte et le texte gauche et droit, que chaque caractère, lettre, etc. soit ou non. séparés par des espaces. Même les caractères d'espace sont espacés des autres caractères.


3. Comparaison simple de l'attribut d'espacement des mots et de l'attribut d'espacement des lettres

attribut d'espacement des mots

1. Récupérez ou définissez le nombre d'espaces insérés entre les mots dans l'objet. Les valeurs négatives sont autorisées. Cet attribut convient à l’usage de l’anglais.

2. Pour l'anglais, si plusieurs lettres sont reliées entre elles, elles seront considérées comme un seul mot par espacement des mots ; pour les caractères chinois, si les caractères chinois sont séparés par des espaces, les caractères chinois séparés seront considérés. comme un seul mot, différents mots, l'attribut d'espacement des mots est en vigueur à ce moment-là.

attribut d'espacement des lettres

1. Définissez l'espacement entre le texte dans l'objet. Chaque texte chinois et chaque lettre anglaise sont séparés par tous. Définissez cette propriété. contrôle l’espacement des caractères. Cet attribut s'applique à la fois au chinois et à l'anglais ;

2. Il ne fonctionne que sur le texte mais pas sur les images

3. lettre espacée.

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!

Déclaration
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
Tant de liens de couleursTant de liens de couleursApr 13, 2025 am 11:36 AM

Il y a eu une série d'outils, d'articles et de ressources sur la couleur récemment. Veuillez me permettre de fermer quelques onglets en les rassemblant ici pour votre plaisir.

Comment fonctionnent les marges automnales dans FlexboxComment fonctionnent les marges automnales dans FlexboxApr 13, 2025 am 11:35 AM

Robin a déjà couvert cela, mais j'ai entendu une certaine confusion au cours des dernières semaines et j'ai vu une autre personne prendre un coup de poing pour l'expliquer, et je voulais

Les soulignements arc-en-ciel en mouvementLes soulignements arc-en-ciel en mouvementApr 13, 2025 am 11:27 AM

J'adore la conception du site Sandwich. Parmi les nombreuses caractéristiques belles figurent ces titres avec des soulignements arc-en-ciel qui se déplacent lorsque vous faites défiler. Ce n'est pas

Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Apr 13, 2025 am 11:26 AM

De nombreux conceptions de CV populaires tirent le meilleur parti de l'espace de page disponible en disant des sections en forme de grille. Utilisons la grille CSS pour créer une disposition qui

Une façon de sortir les utilisateurs de l'habitude de recharger tropUne façon de sortir les utilisateurs de l'habitude de recharger tropApr 13, 2025 am 11:25 AM

Les recharges de page sont une chose. Parfois, nous actualisons une page lorsque nous pensons que cela ne répond pas, ou croyons que un nouveau contenu est disponible. Parfois, nous sommes juste en colère contre

Conception axée sur le domaine avec réactConception axée sur le domaine avec réactApr 13, 2025 am 11:22 AM

Il y a très peu de conseils sur la façon d'organiser des applications frontales dans le monde de la réaction. (Déplacez simplement les fichiers jusqu'à ce qu'il «se sent bien», LOL). La vérité

Détecter les utilisateurs inactifsDétecter les utilisateurs inactifsApr 13, 2025 am 11:08 AM

La plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, signifiant, peut-être qu'ils

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo a toujours été génial avec les intégrations. Ils ont des intégrations avec des applications spécifiques, comme Campaign Monitor, MailChimp et Typekit, mais ils aussi

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)