white-space
속성의 이해
white-space
속성은
요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다.
공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
공백 문자는 텍스트의 가독성을 높이거나, 레이아웃을 정렬하는 등의 역할을 합니다.
white-space
속성을 사용하여 요소 내부 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 어떻게 다룰지를 설정할 수 있습니다.
'HTML 데모: white-space' 내부 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 확인하면서 아래의 'CSS 데모: white-space' 데모 버튼을 클릭해서 white-space
속성의 값의 구현을 확인해 보세요!
<p>
값은 다음과 같은 의미를 갖으며,
이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
This is some text. This is some text.
</p>
값은 다음과 같은 의미를 갖으며, 이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다. This is some text. This is some text.
형식 구문
selector {
white-space: /* value */
}
형식 정의
초깃값 |
|
---|---|
적용대상 | 모든 요소 |
상속 | 예 |
값
normal |
대부분의 요소에서 초깃값입니다.
연속되는 공백을 하나로 합칩니다. 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)은 다른 공백 문자와 동일하게 처리합니다. 필요에 따라(예를 들자면, 한 줄이 너무 길 경우) 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시킵니다. |
---|---|
nowrap |
normal 값의 경우와 마찬가지로, 연속되는 공백을 하나로 합칩니다. 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)은 다른 공백 문자와 동일하게 처리합니다.
하지만, normal 값과는 달리 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈 시키지 않습니다. |
pre |
<pre> 요소에서 초깃값입니다.
이 값은 마치 소스(소스 코드를 의미함)의 미리보기(Preview)처럼 구현됩니다. 연속되는 공백을 인위적으로 하나로 합치지 않으며, 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함) 또한 그대로 유지하여 인위적인 공백의 축소를 하지 않습니다. 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키지 않습니다. 하지만 <br> 에서는 강제로 줄바꿈시키는 것이 유지됩니다. |
pre-wrap |
<textarea> 요소에서 초깃값입니다.
pre 값과 모든 것이 동일하게 구현되지만, normal 값의 경우처럼 필요에 따라(예를 들자면, 한 줄이 너무 길 경우) 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킨다는 것이 다릅니다. |
pre-line |
이 값은 마치 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)에 대한 미리보기(Preview)처럼 구현됩니다.
normal 값과 모든 것이 동일하게 구현되지만, 소스(소스 코드를 의미함)에서 줄바꿈(개행, Enter 키를 누를 때 줄바꿈을 의미함)을 공백 문자로 처리하지 않고 강제 줄바꿈시킨다는 점에서 normal 값과는 다릅니다. |
break-spaces |
이 값은 다음을 제외하고는 pre-wrap 과 동일합니다.
|
다음은 다양한 white-space
속성의 값의 구현을 정리한 표입니다.
white-space 속성의 값 | Enter | Space, Tab | 텍스트 자동 줄바꿈 | 줄 끝의 공백 |
---|---|---|---|---|
normal |
합침 | 합침 | 예 | 제거 |
nowrap |
합침 | 합침 | 아니오 | 제거 |
pre |
보존 | 보존 | 아니오 | 보존 |
pre-wrap |
보존 | 보존 | 예 | 걸림 |
pre-line |
보존 | 합침 | 예 | 제거 |
break-spaces |
보존 | 보존 | 예 | 자동 줄바꿈 |
공식 명세서(https://drafts.csswg.org/css-text/#white-space-property)에서 초깃값은 normal
입니다.
하지만, 대부분의 브라우저에서 <pre>
는 pre
이고, <textarea>
는 pre-wrap
입니다.
<pre>
요소에서의 초깃값: pre
<pre style="width:250px; background-color:gold;">
값은 다음과 같은 의미를 갖으며,
이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
This is some text. This is some text.
</pre>
값은 다음과 같은 의미를 갖으며,
이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
This is some text. This is some text.
<textarea>
요소에서의 초깃값: pre-wrap
<textarea style="width:250px; height:120px; background-color:gold;">
값은 다음과 같은 의미를 갖으며,
이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
This is some text. This is some text.
</textarea>
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
white-space
|
예 | 예 | 예 | 예 |
명세서
명세서 사양 | |
---|---|
white-space
|
CSS Text Module Level 3 #white-space-property |