blob: 82f963023f67061ceb56a69c94d16145b9cff688 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
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>&shy;</code>를 사용해 입력하세요.</dd>
</dl>
<div class="blockIndicator note">
<p>HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.</p>
</div>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="붙임표_줄_바꿈_지정하기">붙임표 줄 바꿈 지정하기</h3>
<p>다음 예제는 <code>hyphens</code> 속성에 사용할 수 있는 세 개 값을 시연합니다.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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>
</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>
|
