CSS에 공백 기호를 추가하는 방법

CSS에 공백 기호를 추가하는 방법에는 HTML 엔터티 문자(예: 및 ), 텍스트 속성(예: 공백 및 단어 간격), 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: " "; }
: 엔터티는 줄 바꿈이 아닌 공백을 나타낼 수도 있습니다.

 : 항목은 반자 공백을 나타냅니다(줄바꿈이 아닌 공백보다 약간 넓음).  : 항목은 잘림 방지 공백(반자 공백보다 약간 좁음)을 나타냅니다.

 : 엔터티는 얇은 공백(줄바꿈하지 않는 공백보다 좁음)을 나타냅니다.

2. 텍스트 속성

텍스트 속성을 사용하여 공백을 제어할 수 있습니다. 예:

white-space: 이 속성은 단어와 줄이 공백으로 처리되는 방식을 제어합니다. 예를 들어 white-space: nowrap;은 단어 줄 바꿈을 방지합니다.

word-spacing: 이 속성은 단어 사이의 간격을 설정합니다.

🎜letter-spacing: 이 속성은 글자 사이의 간격을 설정합니다. 🎜🎜🎜🎜3. CSS 함수 🎜🎜🎜CSS 함수는 공백을 생성할 수 있습니다. 예: 🎜🎜🎜calc(1em): 1em 공백을 만듭니다. 🎜🎜space(1): 상위 요소의 너비를 기준으로 1% 간격을 만듭니다. 🎜🎜🎜🎜4. 의사 요소 🎜🎜🎜 의사 요소를 사용하여 컨테이너에 공백을 추가할 수 있습니다. 예: 🎜🎜🎜::after: 요소 뒤에 콘텐츠를 추가합니다. 예: ::이후 { 내용: " " }. 🎜🎜🎜🎜Example🎜🎜🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!