From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:17 -0500
Subject: initial commit

---
 files/ko/web/css/overflow-wrap/index.html | 118 ++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 files/ko/web/css/overflow-wrap/index.html

(limited to 'files/ko/web/css/overflow-wrap')

diff --git a/files/ko/web/css/overflow-wrap/index.html b/files/ko/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..b2241a5b61
--- /dev/null
+++ b/files/ko/web/css/overflow-wrap/index.html
@@ -0,0 +1,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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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">&lt;p class="normal"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (normal)&lt;/p&gt;
+&lt;p class="overflow-wrap"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (overflow-wrap)&lt;/p&gt;
+&lt;p class="word-break"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (word-break)&lt;/p&gt;
+&lt;p class="hyphens"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (hyphens)&lt;/p&gt;</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>
-- 
cgit v1.2.3-54-g00ecf