This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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월.
CSSline-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> auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> 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 |