white-space

속성값	설명
normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

•

연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시

•

부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈

•

두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능

( 와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

•

설정값은 normal과 동일

•

자동 줄바꿈이 일어나지 않음

•

overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김

◦

말줄임 기호(…)로 표시

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
CSS
복사

◦

가로 스크롤바

div {
  white-space: nowrap;
  overflow: auto;
}
CSS
복사

pre

•

연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지

•

들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

•

pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존

•

텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈

•

좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

•

줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리

•

pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

•

잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>
HTML
복사