line-break

CSS line-break 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.

/* 키워드 값 */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* 전역 값 */
line-break: inherit;
line-break: initial;
line-break: unset;

구문

auto
기본 줄 바꿈 규칙을 사용합니다.
loose
가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.
normal
가장 흔한 줄 바꿈 규칙을 사용합니다.
strict
가장 엄격한 줄 바꿈 규칙을 사용합니다.
anywhere

모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 word-break가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.

형식 정의

초기값auto
적용대상all elements
상속yes
Computed valueas specified
Animation typediscrete

형식 구문

auto | loose | normal | strict | anywhere

예제

줄 바꿈 지정하기

줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.

HTML

<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>

CSS

.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; }

결과

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'line-break' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
line-breakChrome Full support 58
Full support 58
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 14Firefox Full support 69IE Full support 5.5
Full support 5.5
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 45
Full support 45
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 11
Full support 11
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 2 — 3
Prefixed
Prefixed Implemented with the vendor prefix: -khtml-
WebView Android Full support 58
Full support 58
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 58
Full support 58
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android No support NoOpera Android Full support 43
Full support 43
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 11
Full support 11
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 7.0
Full support 7.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.