white-space

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

참고: 단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요.

구문

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

white-space 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.

normal
연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
nowrap
연속 공백을 하나로 합침. 줄 바꿈은 <br> 요소에서만 일어납니다.
pre
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서만 일어납니다.
pre-wrap
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
pre-line
연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
break-spaces
다음 차이점을 제외하면 pre-wrap과 동일합니다.
  • 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.
  • 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.
  • 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줍니다.

다음은 여러가지 white-space 값의 동작을 정리한 표입니다.

개행 문자 스페이스, 탭 자동 줄 바꿈 줄 끝의 공백
normal 병합 병합 제거
nowrap 병합 병합 아니오 제거
pre 유지 유지 아니오 유지
pre-wrap 유지 유지 넘침
pre-line 유지 병합 제거
break-spaces 유지 유지 줄 바꿈

형식 구문

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

예제

기본 예제

code { 
  white-space: pre; 
}

<pre> 요소 내부의 줄 바꿈

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* current browsers */
}

실제로 보기

HTML

    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS + 결과

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'white-space' in that specification.
Working Draft Precises the breaking algorithms.
CSS Level 2 (Revision 1)
The definition of 'white-space' in that specification.
Recommendation Initial definition
초기값normal
적용대상all elements
상속yes
Computed valueas specified
Animation typediscrete

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
white-spaceChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
break-spacesChrome Full support 76Edge Full support 79Firefox Full support 69IE No support NoOpera Full support 62Safari Full support 13.1WebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13.4Samsung Internet Android Full support 12.0
nowrapChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
preChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 4Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
pre-lineChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 9.5Safari Full support 3WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
pre-wrapChrome Full support 1Edge Full support 12Firefox Full support 3
Full support 3
No support 1 — 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 8
Notes
Full support 8
Notes
Notes From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera Full support 8Safari Full support 3WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
Support in SVGChrome No support NoEdge No support 12 — 79Firefox Full support 36IE Full support 10Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 36Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Support on <textarea>Chrome Full support 1Edge Full support 12Firefox Full support 36IE Full support 5.5Opera Full support 4Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 36Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기