---
title: hyphens
slug: Web/CSS/hyphens
tags:
  - CSS
  - CSS Property
  - CSS Text
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/hyphens
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다.</span> 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.</p>

<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<p>붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 <code><a href="/ko/docs/Web/HTML/Global_attributes/lang">lang</a></code> 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 <code><a href="/ko/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 특성을 사용해야 합니다.</p>

<div class="note">
<p><strong>참고:</strong> 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.</p>
</div>

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

<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* 전역 값 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
</pre>

<p><code>hyphens</code> 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.</p>

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

<dl>
 <dt><code>none</code></dt>
 <dd>단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.</dd>
 <dt><code>manual</code></dt>
 <dd>단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 {{anch("줄 바꿈 위치 제안")}}에서 자세한 정보를 알아보세요.</dd>
 <dt><code>auto</code></dt>
 <dd>브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 {{anch("줄 바꿈 위치 제안")}} 을 보세요)한 경우에는 해당 위치를 사용합니다.</dd>
</dl>

<div class="note">
<p><strong>참고:</strong> 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 <code>auto</code> 값의 동작도 정확해집니다. HTML <code>lang</code> 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.</p>
</div>

<h2 id="줄_바꿈_위치_제안">줄 바꿈 위치 제안</h2>

<p>아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.</p>

<dl>
 <dt>U+2010 (HYPHEN)</dt>
 <dd>붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.</dd>
 <dt>U+00AD (SHY)</dt>
 <dd>투명한 "소프트" 하이픈("<strong>s</strong>oft" <strong>hy</strong>phen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 <code>&amp;shy;</code>를 사용해 입력하세요.</dd>
</dl>

<div class="blockIndicator note">
<p>HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.</p>
</div>

<h2 id="형식_정의">형식 정의</h2>

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

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

{{csssyntax}}

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

<h3 id="붙임표_줄_바꿈_지정하기">붙임표 줄 바꿈 지정하기</h3>

<p>다음 예제는 <code>hyphens</code> 속성에 사용할 수 있는 세 개 값을 시연합니다.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;dt&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed&lt;/dt&gt;
  &lt;dd lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
  &lt;dt&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)&lt;/dt&gt;
  &lt;dd lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
  &lt;dt&gt;&lt;code&gt;auto&lt;/code&gt;: hyphens where the algorithm decides (if needed)&lt;/dt&gt;
  &lt;dd lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
&lt;/dl&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">dd {
  width: 55px;
  border: 1px solid black;
 }
dd.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
</pre>

<h4 id="결과">결과</h4>

<figure>
<p>{{EmbedLiveSample("붙임표_줄_바꿈_지정하기", "100%", 490)}}</p>
</figure>

<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", "#hyphens-property", "hyphens")}}</td>
   <td>{{Spec2("CSS3 Text")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

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

<div>


<p>{{Compat("css.properties.hyphens")}}</p>
</div>

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

<ul>
 <li>{{Cssxref("content")}}</li>
 <li>{{cssxref("overflow-wrap")}} (이전 이름 <code>word-wrap</code>)</li>
 <li>{{cssxref("word-break")}}</li>
</ul>