blob: a12ca7eec36b9e82e41e60830f637f56e790c028 (
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
|
---
title: word-break
slug: Web/CSS/word-break
tags:
- CSS
- CSS Property
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/word-break
---
<div>{{CSSRef}}</div>
<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>word-break</code></strong> 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함 */
/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;
</pre>
<p><code>word-break</code> 속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다.</p>
<h3 class="brush:css" id="값">값</h3>
<dl>
<dt><code>normal</code></dt>
<dd>기본 줄 바꿈 규칙을 사용합니다.</dd>
<dt><code>break-all</code></dt>
<dd>오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)</dd>
<dt><code>keep-all</code></dt>
<dd>한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 <code>normal</code>과 동일합니다.</dd>
<dt><code>break-word</code> {{Deprecated_inline}}</dt>
<dd>실제 {{cssxref("overflow-wrap")}} 속성에 상관하지 않고, <code>word-break: normal</code>과 <code>overflow-wrap: anywhere</code>를 설정한 것과 같은 효과를 냅니다.</dd>
</dl>
<div class="note">
<p><strong>참고:</strong> <code>word-break: break-word</code>와 <code>overflow-wrap: break-word</code>({{cssxref("overflow-wrap")}} 참고)와 달리, <code>word-break: break-all</code>은 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.</p>
</div>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">.narrow {
padding: 5px;
border: 1px solid;
display: table;
max-width: 100%;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keepAll {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
</pre>
<p>{{EmbedLiveSample('예제', '100%', 600)}}</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', '#word-break-property', 'word-break')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.word-break")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{cssxref("overflow-wrap")}}</li>
</ul>
|
