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: 기본 줄 바꿈 규칙을 사용합니다.
loose: 가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.
normal: 가장 흔한 줄 바꿈 규칙을 사용합니다.
strict: 가장 엄격한 줄 바꿈 규칙을 사용합니다.
anywhere: 모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 word-break가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.

형식 정의

초기값	`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

브라우저 호환성

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025년 11월 2일⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content