--- 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> {{csssyntax}} <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>