Comment ajouter des symboles d'espace en CSS

Il existe quatre façons d'ajouter des symboles d'espace en CSS : les caractères d'entité HTML (tels que et ), les attributs de texte (tels que les espaces blancs et l'espacement des mots), les fonctions CSS (telles que calc(1em) et space(1) ) et pseudo-élément (par exemple ::after).

Ajouter un symbole d'espace en CSS

Il existe plusieurs façons d'ajouter un symbole d'espace (espace, nouvelle ligne ou caractère de tabulation) en CSS :

1. Caractères d'entité HTML

Utilisez des caractères d'entité HTML. sont un moyen courant d'ajouter des espaces :

•   : les entités représentent des espaces insécables (séparant le texte mais ne l'enveloppant pas). ： 实体表示非换行空格（将文本分开但不换行）。
•  ： 实体也可以表示非换行空格。
•  ： 实体表示半角空格（略宽于非换行空格）。
•  ： 实体表示非断开空格（比半角空格稍窄）。
•  ： 实体表示细空格（比非断开空格更窄）。

2. 文本属性

可以利用文本属性控制空格，例如：

• white-space：此属性控制单词和行的空格处理方式。例如，white-space: nowrap; 阻止单词换行。
• word-spacing：此属性设置单词之间的间距。
• letter-spacing：此属性设置字母之间的间距。

3. CSS 函数

CSS 函数可以生成空格，例如：

• calc(1em)：创建一个 1em 的空格。
• space(1)：创建一个相对于父元素宽度的 1% 间隙。

4. 伪元素

可以使用伪元素为容器添加空格，例如：

• ::after：在元素后添加内容，例如：::after { content: " "; }
 : L'entité peut également représenter des espaces non-nouvelle ligne.

  : L'entité représente des espaces demi-largeur (légèrement plus larges que les espaces non-nouvelle ligne).   : L'entité représente des espaces insécables (légèrement plus étroits que les espaces demi-largeur).

  : l'entité représente des espaces fins (plus étroits que les espaces insécables).

2. Attributs de texte

Vous pouvez utiliser des attributs de texte pour contrôler les espaces, par exemple :

white-space : cet attribut contrôle la façon dont les mots et les lignes sont traités avec des espaces. Par exemple, white-space: nowrap; empêche le retour à la ligne des mots.

word-spacing : Cette propriété définit l'espacement entre les mots.

🎜letter-spacing : Cette propriété définit l'espacement entre les lettres. 🎜🎜🎜🎜3. Fonctions CSS 🎜🎜🎜Les fonctions CSS peuvent générer des espaces, par exemple : 🎜🎜🎜calc(1em) : Créez un espace de 1em. 🎜🎜space(1) : Crée un écart de 1 % par rapport à la largeur de l'élément parent. 🎜🎜🎜🎜4. Pseudo-éléments 🎜🎜🎜Vous pouvez utiliser des pseudo-éléments pour ajouter des espaces au conteneur, par exemple : 🎜🎜🎜::after : Ajoutez du contenu après l'élément, par exemple : ::après { contenu: " >. 🎜🎜🎜🎜Exemple🎜🎜🎜🎜HTML : 🎜🎜

<code class="html"><p>这是<span> </span>一个<span>&emsp;</span>带空格<span>&ensp;</span>的文本。</p></code>

🎜🎜CSS : 🎜🎜

<code class="css">p {
  word-spacing: 1em;
  letter-spacing: 0.5em;
}</code>

🎜🎜Sortie : 🎜🎜🎜Ceci est un texte avec des espaces. 🎜

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!