line-break
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020년 7월.
CSS line-break 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.
css
/* 키워드 값 */ 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 |
|---|---|
| 적용대상 | all elements |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |
형식 구문
line-break =
auto |
loose |
normal |
strict |
anywhere
예제
줄 바꿈 지정하기
줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.
HTML
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
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 |
|---|
| CSS Text Module Level 3 # line-break-property |