Bagaimana untuk menambah simbol ruang dalam css

Terdapat empat cara untuk menambah simbol ruang dalam CSS: aksara entiti HTML (seperti dan ), atribut teks (seperti ruang putih dan jarak perkataan), fungsi CSS (seperti calc(1em) dan ruang(1) ), dan unsur pseudo (cth. ::after).

Tambah simbol ruang dalam CSS

Terdapat beberapa cara untuk menambah simbol ruang (ruang, baris baharu atau aksara tab) dalam CSS:

1. aksara entiti HTML

ialah cara biasa untuk menambah ruang putih:

 : Entiti mewakili ruang putih tidak pecah (memisahkan teks tanpa membalutnya).
• ： 实体表示非换行空格（将文本分开但不换行）。
•  ： 实体也可以表示非换行空格。
•  ： 实体表示半角空格（略宽于非换行空格）。
•  ： 实体表示非断开空格（比半角空格稍窄）。
•  ： 实体表示细空格（比非断开空格更窄）。

2. 文本属性

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

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

3. CSS 函数

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

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

4. 伪元素

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

• ::after：在元素后添加内容，例如：::after { content: " "; } : Entiti juga boleh mewakili ruang bukan baris baharu.

 : Entiti mewakili ruang separuh lebar (lebih lebar sedikit daripada ruang bukan baris baharu).

 : Entiti mewakili ruang tidak pecah (sedikit lebih sempit daripada ruang separuh lebar).

 : Entiti mewakili ruang nipis (lebih sempit daripada ruang tidak pecah).

2. Atribut teks

Anda boleh menggunakan atribut teks untuk mengawal ruang, contohnya:

ruang-putih: Atribut ini mengawal cara perkataan dan baris dilayan dengan ruang. Contohnya, white-space: nowrap; menghalang perkataan daripada dibungkus.

jarak perkataan: Sifat ini menetapkan jarak antara perkataan.

jarak-huruf: Sifat ini menetapkan jarak antara huruf. 🎜🎜🎜🎜3. Fungsi CSS 🎜🎜🎜Fungsi CSS boleh menjana ruang, contohnya: 🎜🎜🎜calc(1em): Buat ruang 1em. 🎜🎜ruang(1): Mencipta jurang 1% berbanding dengan lebar elemen induk. 🎜🎜🎜🎜4. Elemen Pseudo 🎜🎜🎜Anda boleh menggunakan elemen pseudo untuk menambah ruang pada bekas, contohnya: 🎜🎜🎜::selepas: tambah kandungan selepas elemen, contohnya: ::selepas { kandungan: " "; 🎜🎜🎜🎜Contoh🎜🎜🎜🎜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>

🎜🎜Output: 🎜🎜Ini adalah a dengan ruang 🎜

Atas ialah kandungan terperinci Bagaimana untuk menambah simbol ruang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!