CSS에서 공백을 처리하는 방법(예)

이 글의 내용은 CSS에서 공백을 처리하는 방법(예제)에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 공백 규칙

HTML 코드의 공백은 일반적으로 브라우저에서 무시됩니다.

<p>◡◡hello◡◡world◡◡</p>

위는 HTML 코드 줄로, 텍스트 앞, 안쪽, 뒤에 공백이 각각 두 개씩 있습니다. 식별을 용이하게 하기 위해 여기서는 공백을 나타내는 데 반원 기호 ◡를 사용했습니다. ◡表示空格。

浏览器的输出结果如下。

hello world

可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。

如果希望空格原样输出，可以使用e03b848252eb9375d56be284e690e873标签。

<pre class="brush:php;toolbar:false">◡◡hello◡◡world◡◡

另一种方法是，改用 HTML 实体 表示空格。

<p>  hello  world  </p>

二、空格字符

HTML 处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（t）和换行符（r和n）。

浏览器会自动把这些符号转成普通的空格键。

<p>hello
world</p>

上面代码中，文本内部包含了一个换行符，浏览器视同为空格，输出结果如下。

hello world

所以，文本内部的换行是无效的（除非文本放在e03b848252eb9375d56be284e690e873标签内）。

<p>hello<br>world</p>

上面代码使用0c6dc11e160d3b678d68754cc175188a标签显式表示换行。

三、CSS 的 white-space 属性

HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。

3.1 white-space: normal

white-space属性的默认值为normal，表示浏览器以正常方式处理空格。

<p>◡◡hellohellohello◡hello
world
</p>

上面代码中，文本前部有两个空格，内部有一个长单词和一个换行符。

然后，容器e388a4556c0f65e1904146cc1a846bee指定一个比较小的宽度。为了便于识别，背景色设为红色。

p {
  width: 100px;
  background: red;
}

显示效果如下图。

可以看到，文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在后面一个空格处换行。文本内部的换行符自动转成了空格。

3.2 white-space: nowrap

white-space属性为nowrap时，不会因为超出容器宽度而发生换行。

p {
  white-space: nowrap;
}

显示效果如下图。

所有文本显示为一行，不会换行。

3.3 white-space: pre

white-space属性为pre时，就按照e03b848252eb9375d56be284e690e873标签的方式处理。

p {
  white-space: pre;
}

显示效果如下图。

上面结果与原始文本完全一致，所有空格和换行符都保留了。

3.4 white-space: pre-wrap

white-space属性为pre-wrap时，基本还是按照e03b848252eb9375d56be284e690e873标签的方式处理，唯一区别是超出容器宽度时，会发生换行。

p {
  white-space: pre-wrap;
}

显示效果如下图。

文首的空格、内部的空格和换行符都保留了，超出容器的地方发生了折行。

3.5 white-space: pre-line

white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

p {
  white-space: pre-line;
}

显示效果如下图。

除了文本内部的换行符没有转成空格，其他都与normal

브라우저 출력은 다음과 같습니다.

rrreee

텍스트 앞뒤의 공백은 무시되고, 그 안에 연속된 공백만 1개로 계산되는 것을 볼 수 있습니다. 이는 브라우저가 공백을 처리하는 기본 규칙입니다.

공백을 그대로 출력하고 싶다면 e03b848252eb9375d56be284e690e873 태그를 사용하시면 됩니다. rrreee

대안은 HTML 엔터티  를 사용하여 공백을 나타내는 것입니다. 🎜rrreee🎜🎜 2. 공백 문자 🎜🎜🎜HTML의 공백 처리 규칙은 다양한 문자에 적용됩니다. 일반 스페이스바 외에도 탭 문자(t)와 개행 문자(r 및 n)도 포함됩니다. 🎜🎜브라우저는 자동으로 이러한 기호를 일반 스페이스 키로 변환합니다. 🎜rrreee🎜위 코드에서 텍스트에는 개행 문자가 포함되어 있는데, 이는 브라우저에서 공백으로 간주됩니다. 🎜rrreee🎜따라서 텍스트 내의 줄 바꿈은 유효하지 않습니다(텍스트가 e03b848252eb9375d56be284e690e873 태그 내에 배치되지 않는 한). 🎜rrreee🎜위 코드는 0c6dc11e160d3b678d68754cc175188a 태그를 사용하여 줄 바꿈을 명시적으로 나타냅니다. 🎜🎜🎜3. CSS의 공백 속성 🎜🎜🎜HTML 언어의 공백 처리는 기본적으로 직접 필터링입니다. 이러한 처리는 너무 조잡하며 원본 텍스트 내부의 공백이 의미가 있을 수 있다는 사실을 완전히 무시합니다. 🎜🎜CSS는 공백을 처리하는 보다 정확한 방법을 제공할 수 있는 white-space 속성을 ​​제공합니다. 이 속성에는 총 6개의 값이 있습니다. 일반적인 inherit(상위 요소 상속) 외에 나머지 5개의 값은 아래에 소개되어 있습니다. 🎜

3.1 공백: 일반

🎜 white-space 속성의 기본값은 normal입니다. 이는 브라우저가 공백을 처리한다는 의미입니다. 정상적인 방법. 🎜rrreee🎜위 코드에는 텍스트 앞에 공백 두 개가 있고 그 안에 긴 단어와 개행 문자가 있습니다. 🎜🎜그런 다음 컨테이너 e388a4556c0f65e1904146cc1a846bee는 더 작은 너비를 지정합니다. 쉽게 식별할 수 있도록 배경색을 빨간색으로 설정했습니다. 🎜rrreee🎜디스플레이 효과는 아래와 같습니다. 🎜🎜🎜🎜보시다시피, 선행 공백은 무시됩니다. 컨테이너가 너무 좁기 때문에 첫 번째 단어가 컨테이너를 넘치고 그 뒤에 공백 하나를 줄입니다. 텍스트 내의 줄 바꿈은 자동으로 공백으로 변환됩니다. 🎜

3.2 공백: nowrap

🎜 white-space 속성이 nowrap인 경우 컨테이너 너비 초과로 인해 줄 바꿈이 발생하지 않습니다. 🎜rrreee🎜디스플레이 효과는 아래와 같습니다. 🎜🎜🎜🎜모든 텍스트가 표시됩니다 한 줄로 줄 바꿈이 없습니다. 🎜

3.3 공백: pre

🎜 white-space 속성이 pre인 경우 <pre class="brush:php;toolbar:false"></pre>를 따릅니다. 라벨 처리. 🎜rrreee🎜디스플레이 효과는 아래와 같습니다. 🎜🎜🎜🎜위 결과는 원본과 동일 텍스트는 정확히 동일하며 모든 공백과 줄 바꿈이 유지됩니다. 🎜

3.4 공백: 사전 포장

🎜 white-space 속성이 사전 포장인 경우 기본적으로 1417fd9caae40516c8185eb949b251ed 태그의 유일한 차이점은 컨테이너 너비를 초과하면 줄 바꿈이 발생한다는 것입니다. 🎜rrreee🎜디스플레이 효과는 아래와 같습니다. 🎜🎜🎜🎜처음에 공백 기사의 내부 공백과 개행 문자는 유지되며 컨테이너 너머에서는 줄 바꿈이 발생합니다. 🎜

3.5 공백: pre-line

🎜 white-space 속성이 pre-line인 경우 개행 문자를 유지한다는 의미입니다. 그대로 출력되는 개행 문자를 제외하고 다른 모든 항목은 white-space:normal 규칙을 따릅니다. 🎜rrreee🎜디스플레이 효과는 아래와 같습니다. 🎜🎜🎜🎜이 외에도 개행 문자 안의 텍스트는 공백으로 변환되지 않으며 다른 처리 규칙은 일반과 일치합니다. 이는 시 형식의 텍스트에 유용합니다. 🎜🎜추천 관련 글: 🎜🎜🎜div 태그: 가로 센터링 및 세로 센터링 구현(코드 포함) 🎜🎜

CSS의 text-transform 속성을 사용하여 문자열 변환을 구현하는 코드

위 내용은 CSS에서 공백을 처리하는 방법(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!