CSS にスペース記号を追加するには、HTML エンティティ文字 ( や など)、テキスト属性 (空白や単語間隔など)、CSS 関数 (calc(1em) や space(1) など) の 4 つの方法があります。 )、および疑似要素 (例::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: " "; }
: エンティティは改行以外のスペースも表すことができます。
: エンティティは半角スペース (改行以外のスペースよりわずかに広い) を表します。
: エンティティは非改行スペース (半角スペースよりわずかに狭い) を表します。
: エンティティは薄いスペース (非改行スペースよりも狭い) を表します。
2. テキスト属性
テキスト属性を使用してスペースを制御できます。例:white-space
: この属性は、単語と行をスペースで処理する方法を制御します。たとえば、white-space: nowrap;
は単語の折り返しを防ぎます。
word-spacing
: このプロパティは単語間の間隔を設定します。
letter-spacing
: このプロパティは文字間の間隔を設定します。 🎜🎜🎜🎜3. CSS 関数 🎜🎜🎜CSS 関数はスペースを生成できます。例: 🎜🎜🎜calc(1em)
: 1em スペースを作成します。 🎜🎜space(1)
: 親要素の幅に対して 1% のギャップを作成します。 🎜🎜🎜🎜4. 疑似要素 🎜🎜🎜 疑似要素を使用してコンテナにスペースを追加できます。例: 🎜🎜🎜::after
: 要素の後にコンテンツを追加します。例: ::後 { コンテンツ: " "; 🎜🎜🎜🎜例🎜🎜🎜🎜HTML: 🎜🎜<code class="html"><p>这是<span> </span>一个<span> </span>带空格<span> </span>的文本。</p></code>
<code class="css">p { word-spacing: 1em; letter-spacing: 0.5em; }</code>
以上がCSSにスペース記号を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。