diff options
Diffstat (limited to 'files/ko/web/css/line-break/index.html')
| -rw-r--r-- | files/ko/web/css/line-break/index.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/files/ko/web/css/line-break/index.html b/files/ko/web/css/line-break/index.html new file mode 100644 index 0000000000..76fabd4316 --- /dev/null +++ b/files/ko/web/css/line-break/index.html @@ -0,0 +1,112 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - i18n + - l10n + - 'recipe:css-property' +translation_of: Web/CSS/line-break +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>line-break</code></strong> 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.</p> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; +line-break: anywhere; + +/* 전역 값 */ +line-break: inherit; +line-break: initial; +line-break: unset; +</pre> + +<h2 id="구문">구문</h2> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>기본 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>loose</code></dt> + <dd>가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.</dd> + <dt><code>normal</code></dt> + <dd>가장 흔한 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>strict</code></dt> + <dd>가장 엄격한 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>anywhere</code></dt> + <dd> + <p>모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 {{cssxref("word-break")}}가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.</p> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="줄_바꿈_지정하기">줄 바꿈 지정하기</h3> + +<p>줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div lang="ja"> + <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } +.auto { line-break: auto; } +.loose { line-break: loose; } +.normal { line-break: normal; } +.strict { line-break: strict; } +.anywhere { line-break: anywhere; } +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('줄_바꿈_지정하기', 200, 400) }}</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', '#line-break-property', 'line-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.line-break")}}</p> |