css中怎麼加入空格符號

在CSS 中加入空格符號有四種方法：HTML 實體字元（如  和 ）、文字屬性（如white-space 和word-spacing）、CSS 函數（如calc(1em) 和space(1 )）以及偽元素（如::after）。

在CSS 中加入空格符號

在CSS 中加入一個空格符號（空格、換行符或製表符）有幾種方法：

1. HTML 實體字元

使用HTML 實體字元是新增空格的常見方法：

•  ： 實體表示非換行空格（將文字分開但不換行）。
• ： 實體也可以表示非換行空格。
•  ： 實體表示半角空格（略寬於非換行空格）。
•  ： 實體表示非斷開空格（比半角空格稍窄）。
•  ： 實體表示細空格（比非斷開空格更窄）。

2. 文字屬性

可以利用文字屬性控制空格，例如：

• white-space：此屬性控制單字和行的空格處理方式。例如，white-space: nowrap; 阻止單字換行。
• word-spacing：此屬性設定單字之間的間距。
• letter-spacing：此屬性設定字母之間的間距。

3. CSS 函數

CSS 函數可以產生空格，例如：

• calc(1em)：建立一個1em 的空格。
• space(1)：建立一個相對於父元素寬度的 1% 間隙。

4. 偽元素

可以使用偽元素為容器新增空格，例如：

• :: after：在元素後面加入內容，例如：::after { content: " "; }。

範例

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>

輸出：

這是一個有空格的文字。

以上是css中怎麼加入空格符號的詳細內容。更多資訊請關注PHP中文網其他相關文章！