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
|
---
title: overflow-wrap
slug: Web/CSS/overflow-wrap
tags:
- CSS
- CSS Property
- CSS Text
- Reference
translation_of: Web/CSS/overflow-wrap
---
<div>{{CSSRef}}</div>
<p><code><strong>overflow</strong></code><strong><code>-wrap</code></strong> CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.</p>
<div class="note"><strong>Note:</strong> {{cssxref("word-break")}}와는 달리, <code>overflow-wrap</code>은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.</div>
<p>이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 <code>word-wrap</code>으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 <code>overflow-wrap</code>으로 다시 지어지고, <code>word-wrap</code>은 동의어가 되었습니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush:css">/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
</pre>
<p><code>overflow-wrap</code> 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.</p>
<h3 id="값">값</h3>
<dl>
<dt><code>normal</code></dt>
<dd>줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.</dd>
<dt><code>break-word</code></dt>
<dd>보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.</dd>
</dl>
<h3 id="기본적인_구문">기본적인 구문</h3>
{{csssyntax}}
<h2 id="예시">예시</h2>
<p>이 예시는 긴 단어를 넘길 때 <code>overflow-wrap</code>, <code>word-break</code>, 그리고 <code>hyphens</code>의 결과를 비교합니다.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="normal">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (normal)</p>
<p class="overflow-wrap">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (overflow-wrap)</p>
<p class="word-break">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (word-break)</p>
<p class="hyphens">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (hyphens)</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
width: 13em;
background: gold;
}
.overflow-wrap {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
.hyphens {
hyphens: auto;
}
</pre>
<h3 id="Result">Result</h3>
<p>{{ EmbedLiveSample('Example', '100%', 260) }}</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-overflow-wrap', 'overflow-wrap') }}</td>
<td>{{ Spec2('CSS3 Text') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.overflow-wrap")}}</p>
<h2 id="See_also" name="See_also">바로 보기</h2>
<ul>
<li>{{cssxref("word-break")}}</li>
</ul>
|
