hyphens

CSS hyphens 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다. 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.

붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 lang 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 xml:lang 특성을 사용해야 합니다.

참고: 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.

구문

/* 키워드 값 */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* 전역 값 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

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

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

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

줄 바꿈 위치 제안

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

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

HTML <wbr> 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.

형식 정의

초기값manual
적용대상all elements
상속yes
Computed valueas specified
Animation typediscrete

형식 구문

none | manual | auto

예제

붙임표 줄 바꿈 지정하기

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

HTML

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

CSS

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;
}

결과

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'hyphens' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
hyphensChrome Partial support 55
Notes
Partial support 55
Notes
Notes auto value is only supported on macOS and Android and for languages the OS provides hyphenation for.
Full support 13
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Only -webkit-hyphens: none is supported.
Edge Partial support 12
Prefixed Notes
Partial support 12
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Only works if the specified language is the same as the language of the underlying OS.
Firefox Full support 43
Full support 43
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
IE Partial support 10
Prefixed Notes
Partial support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Only works if the specified language is the same as the language of the underlying OS.
Opera Partial support 44
Notes
Partial support 44
Notes
Notes auto value is only supported on macOS and Android.
Safari Full support 5.1
Prefixed
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 55
Full support 55
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 55
Full support 55
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 43
Full support 43
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
Opera Android Full support 43Safari iOS Full support 4.2
Prefixed
Full support 4.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
Full support 6.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Hyphenation dictionary for Afrikaans (af, af-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Catalan (ca, ca-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Croatian (hr, hr-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Czech (cs, cs-*)Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Danish (da, da-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Dutch (nl, nl-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for English (en, en-*)Chrome Full support 55Edge Full support 12Firefox Full support 6
Notes
Full support 6
Notes
Notes For English, Firefox uses an en-US dictionary
IE Full support 10Opera Full support 44Safari Full support 5.1
Notes
Full support 5.1
Notes
Notes For English, Safari uses different en-GB and en-US dictionaries.
WebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 6
Notes
Full support 6
Notes
Notes For English, Firefox uses an en-US dictionary
Opera Android Full support 43Safari iOS Full support 6
Notes
Full support 6
Notes
Notes For English, Safari uses different en-GB and en-US dictionaries.
Samsung Internet Android Full support 6.0
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Estonian (et, et-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Finnish (fi, fi-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for French (fr, fr-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Galician (gl, gl-*)Chrome No support NoEdge No support NoFirefox Full support 9IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 9Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome No support NoEdge No support NoFirefox Full support 9IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 9Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Icelandic (is, is-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Italian (it, it-*)Chrome No support NoEdge No support NoFirefox Full support 9IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 9Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Latin (la, la-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Polish (pl, pl-*)Chrome No support NoEdge No support NoFirefox Full support 31IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 31Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome No support NoEdge No support NoFirefox Full support 8
Notes
Full support 8
Notes
Notes For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8
Notes
Full support 8
Notes
Notes For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Russian (ru, ru-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Spanish (es, es-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Swedish (sv, sv-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Turkish (tr, tr-*)Chrome No support NoEdge No support NoFirefox Full support 9IE No support NoOpera No support NoSafari Full support 5.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 9Opera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome No support NoEdge No support NoFirefox Full support 9IE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 9Opera Android No support NoSafari iOS Full support 9.3Samsung Internet Android No support No
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Hyphenation dictionary for Welsh (cy, cy-*)Chrome No support NoEdge No support NoFirefox Full support 8IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 8Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기