[css] HTML 내 공백, 줄바꿈 등 처리를 제어하는 속성, white-space

5/17/2025, 12:49:51 PM

css

속성 white-space은 다음과 같은 값을 가질 수 있습니다.

normal: 기본값, 공백 압축, 줄바꿈 무시, 자동 줄바꿈 O
nowrap: 공백 압축, 줄바꿈 무시, 자동 줄바꿈 X
pre: 공백, 줄바꿈 유지, 자동 줄바꿈 X
- 주로 소스코드 보여줄 때 사용
pre-wrap: 공백 줄바꿈 유지, 자동 줄바꿈 O
- 주로 소스코드 보여줄 때 사용
pre-line: 공백 압축, 줄바꿈 유지, 자동 줄바꿈 O

예시

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style> 

div {
	background-color: yellow;
    width: 80px;
}

</style>
</head>
<body>


<h2>normal</h2>
<div style="white-space: normal;">
Hello    World
Next Line
</div>

<hr/>

<h2>nowrap</h2>
<div style="white-space: nowrap;">
Hello    World
Next Line
</div>

<hr/>

<h2>pre</h2>
<div style="white-space: pre;">
Hello    World
Next Line
</div>

<hr/>

<h2>pre-wrap</h2>
<div style="white-space: pre-wrap;">
Hello    World
Next Line
</div>

<hr/>

<h2>pre-line</h2>
<div style="white-space: pre-line;">
Hello    World
Next Line
</div>

</body>
</html>

white-space 속성 테스트