white-space 속성의 이해

white-space 속성은
요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다.

공백 문자(Whitespace):
문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 의미합니다. 일반적으로는 '띄어쓰기'라고 부릅니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈이 있습니다.
공백 문자는 텍스트의 가독성을 높이거나, 레이아웃을 정렬하는 등의 역할을 합니다.

white-space 속성을 사용하여 요소 내부 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 어떻게 다룰지를 설정할 수 있습니다.

'HTML 데모: white-space' 내부 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 확인하면서 아래의 'CSS 데모: white-space' 데모 버튼을 클릭해서 white-space 속성의 값의 구현을 확인해 보세요!

HTML 데모: white-space 
<p>
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</p>
CSS 데모: white-space 데모 버튼을 클릭해 보세요!

정의와 구문

CSS 
selector {
    white-space: /* value */
}
white-space 속성의 정의
초깃값
  • 대부분의 요소는 normal입니다.
  • <pre>는 pre입니다.
  • <textarea>는 pre-wrap입니다.
적용대상 모든 요소
상속 예

값

white-space 속성의 값
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과 동일합니다.
  • 연속되는 공백이 텍스트의 콘텐츠 박스의 끝에 있더라도 하나로 합쳐지지 않습니다. 즉, 연속되는 공백이 공간을 차지합니다.
  • 하지만, 연속되는 공백이 공간을 차지한다고 하더라도 콘텐츠 박스의 끝 경계를 오버플로(overflow, 경계를 넘어섬)하지 않습니다. 그렇기 때문에 콘텐츠 박스 고유의 크기(min-content의 크기나 max-content의 크기)에 영향을 줍니다.
  • 연속되는 공백의 사이나 끝에서도 자동으로 줄바꿈할 기회가 주어질 수 있습니다.

다음은 다양한 white-space 속성의 값의 구현을 정리한 표입니다.

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

HTML 
<pre style="width:250px; background-color:gold;">
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</pre>
실제 적용 모습

<textarea> 요소에서의 초깃값: pre-wrap

HTML 
<textarea style="width:250px; height:120px; background-color:gold;">
    값은 다음과 같은 의미를 갖으며,
    이는 공백 처리 및 줄바꿈 규칙에 따라 구현됩니다.
    This is some text.      This is some        text.
</textarea>
실제 적용 모습

브라우저 호환성

white-space 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
white-space 예 예 예 예

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

white-space 속성의 명세서 사양
명세서 사양
Property CSS Text Module Level 3
#white-space-property

참고문헌

같이 보기