white-space

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해보기

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

구문

css

/* 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`	유지	유지	예	줄 바꿈

형식 구문

white-space = 
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

예제

기본 예제

css

code {
  white-space: pre;
}

`<pre>` 요소 내부의 줄 바꿈

css

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

실제로 보기

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <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>
</div>

.box {
  width: 300px;
  padding: 16px;
  border-radius: 10px;
}

#css-code {
  background-color: rgb(220, 220, 220);
  font-size: 16px;
}

#results {
  background-color: rgb(230, 230, 230);
  overflow-x: scroll;
  height: 400px;
  white-space: normal;
  font-size: 14px;
}

var select = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function (e) {
  results.setAttribute("style", "white-space: " + e.target.value);
});

HTML

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
CSS Text Module Level 3 # white-space-property

초기값	`normal`
적용대상	all elements
상속	yes
계산 값	as specified
Animation type	discrete

브라우저 호환성

BCD tables only load in the browser

같이 보기

단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: overflow-wrap, word-break, hyphens

<pre> 요소 내부의 줄 바꿈

`<pre>` 요소 내부의 줄 바꿈