在 css 中添加空格符號有四種方法:html 實(shí)體字符(如 ? 和 ?)、文本屬性(如 white-space 和 word-spacing)、css 函數(shù)(如 calc(1em) 和 space(1))以及偽元素(如 ::after)。
在 CSS 中添加空格符號
在 CSS 中添加一個(gè)空格符號(空格、換行符或制表符)有幾種方法:
1. HTML 實(shí)體字符
使用 HTML 實(shí)體字符是添加空格的常見方法:
?
:?實(shí)體表示非換行空格(將文本分開但不換行)。
: 實(shí)體也可以表示非換行空格。
?
:?實(shí)體表示半角空格(略寬于非換行空格)。
?
:?實(shí)體表示非斷開空格(比半角空格稍窄)。
?
:?實(shí)體表示細(xì)空格(比非斷開空格更窄)。
2. 文本屬性
可以利用文本屬性控制空格,例如:
white-space
:此屬性控制單詞和行的空格處理方式。例如,white-space: nowrap;
阻止單詞換行。
word-spacing
:此屬性設(shè)置單詞之間的間距。
letter-spacing
:此屬性設(shè)置字母之間的間距。
3. CSS 函數(shù)
CSS 函數(shù)可以生成空格,例如:
calc(1em)
:創(chuàng)建一個(gè) 1em 的空格。
space(1)
:創(chuàng)建一個(gè)相對于父元素寬度的 1% 間隙。
4. 偽元素
可以使用偽元素為容器添加空格,例如:
::after
:在元素后添加內(nèi)容,例如:::after { content: " "; }
。
示例
HTML:
<code class="html"><p>這是<span>?</span>一個(gè)<span>?</span>帶空格<span>?</span>的文本。</p></code>
登錄后復(fù)制
CSS:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">p { word-spacing: 1em; letter-spacing: 0.5em; }</code>
登錄后復(fù)制
輸出:
這是 一個(gè) 帶 空格 的 文本。