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 July 2020.
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 |
형식 구문
예제
줄 바꿈 지정하기
줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.
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 |
브라우저 호환성
BCD tables only load in the browser