path: root/files/ko/web/css/white-space/index.html

---
title: white-space
slug: Web/CSS/white-space
tags:
  - CSS
  - CSS Property
  - CSS Text
  - Reference
translation_of: Web/CSS/white-space
---
<div>{{CSSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>



<div class="note">
<p><strong>참고:</strong> 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요.</p>
</div>

<h2 id="구문">구문</h2>

<pre class="brush: 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;
</pre>

<p><code>white-space</code> 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.</p>

<h3 id="값">값</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
 <dt><code>nowrap</code></dt>
 <dd>연속 공백을 하나로 합침. 줄 바꿈은 {{htmlelement("br")}} 요소에서만 일어납니다.</dd>
 <dt><code>pre</code></dt>
 <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서만 일어납니다.</dd>
 <dt><code>pre-wrap</code></dt>
 <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
 <dt><code>pre-line</code></dt>
 <dd>연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
 <dt><code>break-spaces</code></dt>
 <dd>다음 차이점을 제외하면 <code>pre-wrap</code>과 동일합니다.
 <ul>
  <li>연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.</li>
  <li>연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.</li>
  <li>유지한 연속 공백은 <code>pre-wrap</code>과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(<code>min-content</code>, <code>max-content</code>)에 영향을 줍니다.</li>
 </ul>
 </dd>
</dl>

<p>다음은 여러가지 <code>white-space</code> 값의 동작을 정리한 표입니다.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th></th>
   <th>개행 문자</th>
   <th>스페이스, 탭</th>
   <th>자동 줄 바꿈</th>
   <th>줄 끝의 공백</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th><code>normal</code></th>
   <td>병합</td>
   <td>병합</td>
   <td>예</td>
   <td>제거</td>
  </tr>
  <tr>
   <th><code>nowrap</code></th>
   <td>병합</td>
   <td>병합</td>
   <td>아니오</td>
   <td>제거</td>
  </tr>
  <tr>
   <th><code>pre</code></th>
   <td>유지</td>
   <td>유지</td>
   <td>아니오</td>
   <td>유지</td>
  </tr>
  <tr>
   <th><code>pre-wrap</code></th>
   <td>유지</td>
   <td>유지</td>
   <td>예</td>
   <td>넘침</td>
  </tr>
  <tr>
   <th><code>pre-line</code></th>
   <td>유지</td>
   <td>병합</td>
   <td>예</td>
   <td>제거</td>
  </tr>
  <tr>
   <th><code>break-spaces</code></th>
   <td>유지</td>
   <td>유지</td>
   <td>예</td>
   <td>줄 바꿈</td>
  </tr>
 </tbody>
</table>

<h3 id="형식_구문">형식 구문</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="예제">예제</h2>

<h3 id="기본_예제">기본 예제</h3>

<pre class="brush: css">code {
  white-space: pre;
}</pre>

<h3 id="HTMLElementpre_요소_내부의_줄_바꿈">{{HTMLElement("pre")}} 요소 내부의 줄 바꿈</h3>

<pre class="brush: css">pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* current browsers */
}</pre>

<h2 id="실제로_보기">실제로 보기</h2>

<div class="hidden" id="See_it_in_action_LiveSample">
<pre class="brush: html">&lt;div id="css-code" class="box"&gt;
  p { white-space:
  &lt;select&gt;
    &lt;option&gt;normal&lt;/option&gt;
    &lt;option&gt;nowrap&lt;/option&gt;
    &lt;option&gt;pre&lt;/option&gt;
    &lt;option&gt;pre-wrap&lt;/option&gt;
    &lt;option&gt;pre-line&lt;/option&gt;
    &lt;option&gt;break-spaces&lt;/option&gt;
  &lt;/select&gt; }
&lt;/div&gt;
&lt;div id="results" class="box"&gt;
  &lt;p&gt;    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.&lt;/p&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">.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;
}</pre>

<pre class="brush: js">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);
})</pre>
</div>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">    &lt;p&gt;    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.&lt;/p&gt;
</pre>

<h3 id="CSS_결과">CSS + 결과</h3>

<p>{{EmbedLiveSample('See_it_in_action_LiveSample', '100%', 500)}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Precises the breaking algorithms.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.white-space")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li>
</ul>