white-space 속성

white-space 속성은 텍스트를 새 줄로 어떻게 줄바꿈할지, 그리고 단어 간 공백과 줄 바꿈(코드를 입력할 때 Enter를 누른 부분)을 어떻게 표시할지 설정합니다.

구문

선택자 {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

값	설명
`nowrap`	텍스트가 컨테이너 너비에 맞지 않더라도(이 경우 텍스트가 경계를 벗어납니다) 다른 줄로 줄바꿈되는 것을 금지합니다. 그러나, `br` 태그를 추가하면 텍스트가 새 줄로 이동하게 만듭니다.
`pre`	텍스트는 사이트를 마크업할 때 텍스트 편집기에 입력된 그대로 표시됩니다: 모든 공백과 엔터(코드에 여러 공백이 입력되면 화면에도 여러 개가 표시됨)를 포함합니다. 이때 브라우저는 텍스트가 컨테이너에 맞지 않더라도 새 줄로 텍스트를 줄바꿈하지 않습니다. 텍스트는 단순히 경계를 벗어납니다. pre 태그와 유사하지만, 이것과 달리 글꼴을 고정폭(monospace)으로 변경하지는 않습니다(고정폭 글꼴에 대해서는 `font-family` 속성을 참조하세요).
`pre-wrap`	pre와 동일하며, 차이점은 텍스트가 너무 길어 컨테이너에 들어가지 않을 경우 브라우저가 다른 줄로 줄바꿈한다는 점입니다.
`pre-line`	브라우저는 HTML 코드의 Enter만 고려하고 나머지는 모두 무시합니다(여러 공백은 하나로 표시되며, 브라우저가 자동으로 줄바꿈 위치를 지정합니다).
`normal`	표준 동작: 브라우저가 단어가 컨테이너에 맞도록 자동으로 줄바꿈합니다. 코드의 여러 공백은 화면에서 하나로 표시됩니다.

기본값: normal.

이 예시에서는 nowrap 값이 설정되어 있어 텍스트가 컨테이너에 맞지 않고 경계를 벗어납니다:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

br 태그를 추가하면 텍스트가 새 줄로 이동합니다 (br 태그가 있는 위치에서 정확히):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

이 예시에서 텍스트는 HTML 코드 편집기에 입력된 그대로 표시됩니다 (Tab 키로 생성된 모든 들여쓰기, Enter 등을 포함하여):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

이제 텍스트는 HTML 코드 편집기에 입력된 그대로 표시되지만, 벗어나는 부분은 새 줄로 줄바꿈됩니다:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}