white-space

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

white-space 속성은 어떤 요소(element) 안의 공백(whitespace)이 어떻게 처리될지를 나타내는데 사용됩니다.

초기값normal
적용대상all elements
상속yes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법

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

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

Values

normal
연속된 공백이 하나로 병합됩니다. 소스 안의 줄바꿈 문자는 다른 공백 문자와 같이 취급됩니다. 줄 박스를 채우기 위해 필요에 따라 줄을 끊습니다.
nowrap
normal 과 같이 공백 문자를 병합하지만, 텍스트 줄바꿈(text wrapping)을 하지 않습니다.
pre
연속된 공백이 보존됩니다. 줄은 오로지 소스의 줄바꿈 문자나 <br> 요소에서만 끊어집니다.
pre-wrap
연속된 공백이 보존됩니다. 줄은 줄바꿈 문자, <br>, 그리고 줄 박스를 채우기 위해 필요에 따라 끊어집니다.
pre-line
연속된 공백이 병합됩니다. 줄은 줄바꿈 문자, <br>, 그리고 줄 박스를 채우기 위해 필요에 따라 끊어집니다.

여러가지 white-space 값의 행동을 정리하면 아래 표와 같습니다:

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

정식 문법

normal | pre | nowrap | pre-wrap | pre-line

예제

기본 예제

code { 
  white-space: pre; 
}

<pre> 요소 내부의 줄 바꿈

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

실제로 보기

Source:

    <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+Result:

명세

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

브라우저 호환성

                 
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (normal and nowrap) 1.0 (Yes) 1.0 (1.7 or earlier) 5.5[1] 4.0 1.0 (85)
pre 1.0 (Yes) 1.0 6.0 4.0 1.0 (85)
pre-wrap 1.0 (Yes) 1.0 (1.7 or earlier)-moz
3.0 (1.9)
8.0 8.0 3.0 (522)
pre-line 1.0 (Yes) 3.5 (1.9.1) 8.0 9.5 3.0 (522)
Support on <textarea> 1.0 ? 36 (36) 5.5 4.0 1.0 (85)
     
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

[1] Internet Explorer 5.5+ supports word-wrap: break-word;.

문서 태그 및 공헌자

 이 페이지의 공헌자: maytree
 최종 변경: maytree,