CSS / Reference / white-space

white-space는 연속 공백과 원문의 줄바꿈을 보존할지, 너비에 맞춰 자동 줄바꿈을 허용할지 정합니다. 일반 문장은 normal, 입력한 줄바꿈과 공백을 유지하면서 자동으로 감싸려면 pre-wrap을 사용하는 것이 기본적인 선택입니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.copy { white-space: normal; }
.log { white-space: pre-wrap; overflow-wrap: anywhere; }

값과 적용 조건은 MDN white-space에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 white-space-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>white-space 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; padding: 12px; border: 1px solid #718096; }
.target { white-space: pre-wrap; }
.reference { white-space: normal; }
</style>
</head>
<body>
<main id="demo">
<h1>white-space 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">pre-wrap</p><div class="target">첫째    둘째
셋째 줄에는 조금 더 긴 문장이 들어 있습니다.</div></div><div class="b"><p class="label">normal</p><div class="reference">첫째    둘째
셋째 줄에는 조금 더 긴 문장이 들어 있습니다.</div></div></section>
</main>
</body>
</html>

pre-wrap에서는 연속 공백과 원문의 줄바꿈이 남고, normal에서는 같은 텍스트가 일반적인 문장처럼 합쳐집니다. 두 경우 모두 너비에 따른 자동 줄바꿈은 가능합니다.

긴 한 단어의 처리까지 분리하기

자동 줄바꿈을 허용해도 긴 URL이나 공백 없는 식별자는 넘칠 수 있습니다. white-space는 공백 처리와 감싸기를 제어하며, 단어 내부의 비상 줄바꿈은 overflow-wrap이나 word-break의 역할입니다. nowrap이 있으면 비상 줄바꿈 설정만으로 감싸기가 생기지 않을 수 있습니다.

최신 단축 속성과 기존 키워드

현재 white-space는 white-space-collapse와 text-wrap-mode를 묶는 단축 속성으로 설명됩니다. 위의 전통적인 키워드는 널리 쓰이는 조합입니다. break-spaces는 보존한 공백의 줄바꿈과 끝 공백 처리에서 pre-wrap과 다르므로 공백 자체의 배치가 중요한 경우 별도로 확인하세요.

같은 공백과 개행으로 여섯 값 비교

다음 전체 문서를 css-reference-10597-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>같은 공백과 개행으로 여섯 값 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.sample { width:220px;max-width:100%;background:#e6f2ff;overflow-x:auto;border:1px solid #718096;font-family:monospace; }
  </style>
</head>
<body>
<main>
  <h1>같은 공백과 개행으로 여섯 값 비교</h1>
<p>normal</p><div class="sample" style="white-space:normal">One    two
Third	word and a much longer source line.
Four     </div><p>nowrap</p><div class="sample" style="white-space:nowrap">One    two
Third	word and a much longer source line.
Four     </div><p>pre</p><div class="sample" style="white-space:pre">One    two
Third	word and a much longer source line.
Four     </div><p>pre-wrap</p><div class="sample" style="white-space:pre-wrap">One    two
Third	word and a much longer source line.
Four     </div><p>pre-line</p><div class="sample" style="white-space:pre-line">One    two
Third	word and a much longer source line.
Four     </div><p>break-spaces</p><div class="sample" style="white-space:break-spaces">One    two
Third	word and a much longer source line.
Four     </div>
</main>
</body>
</html>

normal과 nowrap은 원문 개행을 보존하지 않고, pre/pre-wrap/pre-line/break-spaces는 보존합니다. pre-line은 연속 공백을 접습니다. nowrap/pre의 긴 줄은 이 예제의 내부 스크롤로 확인하세요. 끝의 공백 처리까지 보려면 pre-wrap과 break-spaces를 같은 내용·너비에서 바꾸고 원래 값으로 복구합니다.

내용이 넘치는 원인과 스크롤 영역을 함께 살펴보려면 넘치는 콘텐츠와 긴 문자열 처리하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 word-wrap, word-break입니다.

적용되지 않거나 예상과 다를 때

• HTML 편집 과정에서 원문의 공백과 줄바꿈이 실제로 남아 있는지 확인합니다.
• 상위 요소나 테마의 nowrap 규칙이 적용되는지 Computed에서 확인합니다.