So fügen Sie Leerzeichen in CSS hinzu

Es gibt vier Möglichkeiten, Leerzeichen in CSS hinzuzufügen: HTML-Entitätszeichen (z. B. und), Textattribute (z. B. Leerzeichen und Wortabstände), CSS-Funktionen (z. B. calc(1em) und Leerzeichen(1)) ) und Pseudoelement (z. B. ::after).

Leerzeichen in CSS hinzufügen

Es gibt mehrere Möglichkeiten, ein Leerzeichen (Leerzeichen, Zeilenumbruch oder Tabulatorzeichen) in CSS hinzuzufügen:

1. HTML-Entitätszeichen

Verwenden Sie HTML-Entitätszeichen sind eine gängige Methode zum Hinzufügen von Leerzeichen:

•  : Entitäten stellen geschützte Leerzeichen dar (trennen Text, aber brechen ihn nicht ein). ： 实体表示非换行空格（将文本分开但不换行）。
•  ： 实体也可以表示非换行空格。
•  ： 实体表示半角空格（略宽于非换行空格）。
•  ： 实体表示非断开空格（比半角空格稍窄）。
•  ： 实体表示细空格（比非断开空格更窄）。

2. 文本属性

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

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

3. CSS 函数

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

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

4. 伪元素

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

• ::after：在元素后添加内容，例如：::after { content: " "; }
: Die Entität kann auch Nicht-Neuzeilen-Leerzeichen darstellen.

 : Die Entität stellt Leerzeichen halber Breite dar (etwas breiter als Leerzeichen ohne Zeilenumbruch).  : Die Entität stellt geschützte Leerzeichen dar (etwas schmaler als Leerzeichen halber Breite).

 : Entity stellt dünne Leerzeichen dar (schmaler als geschützte Leerzeichen).

2. Textattribute

Sie können Textattribute verwenden, um Leerzeichen zu steuern, zum Beispiel:

white-space: Dieses Attribut steuert, wie Wörter und Zeilen mit Leerzeichen behandelt werden. Beispielsweise verhindert white-space: nowrap;, dass Wörter umbrochen werden.

word-spacing: Diese Eigenschaft legt den Abstand zwischen Wörtern fest.

🎜letter-spacing: Diese Eigenschaft legt den Abstand zwischen Buchstaben fest. 🎜🎜🎜🎜3. CSS-Funktionen 🎜🎜🎜CSS-Funktionen können Leerzeichen generieren, zum Beispiel: 🎜🎜🎜calc(1em): Erstellen Sie ein 1em-Leerzeichen. 🎜🎜space(1): Erstellt eine Lücke von 1 % relativ zur Breite des übergeordneten Elements. 🎜🎜🎜🎜4. Pseudoelemente 🎜🎜🎜Sie können Pseudoelemente verwenden, um dem Container Leerzeichen hinzuzufügen, zum Beispiel: 🎜🎜🎜::after: Fügen Sie Inhalt nach dem Element hinzu, zum Beispiel: ::after { content: " " . 🎜🎜🎜🎜Beispiel🎜🎜🎜🎜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>

🎜🎜Ausgabe: 🎜🎜🎜Dies ist ein Text mit Leerzeichen. 🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie Leerzeichen in CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!