line-break
속성의 정의 및 사용법
line-break
속성은
요소 안의 텍스트에서 줄바꿈 규칙을 얼마나 엄격하게 적용할지를 지정합니다.
특히 자동 줄바꿈(soft wrapping) 시, 가독성을 높이기 위해 구두점이나 기호 다음에서 줄을 바꿀 수 있도록 얼마나 허용할지를 조절합니다.
line-break
속성의 작동 원리를 이해하려면 '자동 줄바꿈(soft wrapping)'에 대한 이해가 필요합니다.
자동 줄바꿈(soft wrapping)
자동 줄바꿈은 텍스트 라인의 끝이 요소 컨테이너에 도달하면 컨테이너에 도달하면 자동으로 다음의 새로운 줄로 줄바꿈하는 것을 말합니다.
흔히 텍스트를 쓸 때 내용이 길어져서 한 줄로 다 쓰지 못하고, 화면이나 컨테이너의 경계를 넘어서면 자연스럽게 줄을 바꿔 새로운 줄에 내용을 표시하는 방식입니다.
line-break
속성의 역할
요소 컨테이너에서 텍스트가 자동 줄바꿈할 때 영어의 경우에는 일반적으로 단어와 단어 사이의 공백에서 자동 줄바꿈하지만, CJK(Chinese - Japanese - Korean, 중국어·일본어·한국어)는 음절 단위에서 자동 줄바꿈합니다. 특히, 일본어와 중국어는 띄어쓰기가 없는 글자입니다.
단, 한국어의 경우에는 word-break
속성의 값이 keep-all
로 설정된 경우는 영어처럼 단어와 단어 사이의 공백에서 줄바꿈합니다.
다음의 예시를 통해 확인해 보세요.
<p lang="en">Automatic line wrapping(soft wrapping) is a method where text automatically breaks onto the next new line when it reaches the boundary of the element.</p>
<p>자동 줄바꿈(soft wrapping)은 텍스트가 요소의 경계에 도달했을 자동으로 다음의 새로운 줄로 줄바꿈하는 방식입니다.</p>
<p lang="ja">自動改行(ソフトラッピング)は、テキストが要素の境界に達したときに、自動的に次の新しい行に改行される方法です。</p>
<p lang="zh">自动换行(软换行)是一种当文本到达元素的边界时,自动换到下一行的新行的方式。</p>
p {
border: 1px dashed red;
width: 200px;
}
Automatic line wrapping(soft wrapping) is a method where text automatically breaks onto the next new line when it reaches the boundary of the element.
자동 줄바꿈(soft wrapping)은 텍스트가 요소의 경계에 도달했을 자동으로 다음의 새로운 줄로 줄바꿈하는 방식입니다.
自動改行(ソフトラッピング)は、テキストが要素の境界に達したときに、自動的に次の新しい行に改行される方法です。
自动换行(软换行)是一种当文本到达元素的边界时,自动换到下一行的新行的方式。
가독성을 높이기 위해 사용
line-break
속성은 이렇게 공백이 아닌 글자가 자동 줄바꿈할 때 가독성을 높이기 위해서 구두점이나 기호 다음에서 줄을 바꿀 수 있도록 얼마나 허용할지를 조절하기 위해 사용됩니다.
CJK(중국어, 일본어, 한국어)에 line-break
속성을 적용하면 텍스트의 가독성을 높이는데 매우 유용합니다.
형식 구문
selector {
line-break: auto | loose | normal | strict | anywhere
}
구문
/* 키워드 값 */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* 전역 값 */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;
형식 정의
초깃값 | auto |
---|---|
적용대상 | 텍스트가 있는 모든 요소 |
상속 | 예 |
애니메이션 | 아니오 |
알아두세요!
단어와 단어 사이의 공백에서 줄바꿈하는 텍스트에는 line-break
속성이 효과가 없습니다.
또한, white-space
속성으로 줄바꿈을 허용하지 않게 설정하면 line-break
속성이 효과가 없습니다.
예를 들어, white-space: nowrap
이나 white-space: pre
로 설정된 텍스트는 line-break
속성이 효과가 없습니다.
값
이 속성은 요소 내에서 적용되는 줄 바꿈 규칙의 엄격성(strictness)을 지정합니다. 특히 자동 줄바꿈이 구두점 및 기호와 상호 작용하는 방식입니다. 값은 다음과 같은 의미를 갖습니다.
auto |
초깃값임.
브라우저는 기본 줄 바꿈 규칙을 자동으로 적용합니다. 줄의 길이에 따한 제한하는 엄격성을 변경할 수 있습니다. 예를 들어, 짧은 줄에는 덜 제한적인 줄바꿈 규칙을 사용합니다. |
---|---|
loose |
가장 제한이 적은 줄바꿈 규칙을 사용하여 텍스트를 나눕니다. 일반적으로 요소 컨테이너가 좁아 짧은 줄에 사용합니다. |
normal |
가장 일반적인 줄바꿈 규칙을 적용합니다. |
strict |
가장 엄격한 줄바꿈 규칙을 적용합니다. |
anywhere |
어디에서나 줄바꿈할 수 있습니다. 이때, 줄바꿈 지점에는 하이픈(-, Hyphen) 문자가 삽입되지 않습니다. |
줄 바꿈 규칙의 엄격성 수준(strictness levels)
line-break
속성은 텍스트 줄바꿈을 얼마나 엄격하게 처리할지를 지정하며, 다음과 같은 네 가지 수준이 존재합니다.
auto
- 초깃값loose
- 느슨한 줄바꿈normal
- 표준 줄바꿈strict
- 엄격한 줄바꿈
이 중 loose
, normal
l, strict
는 CJK 언어(중국어, 일본어, 한국어)에 대해 줄바꿈 위치를 얼마나 허용할지 결정하는 데 사용됩니다.
줄바꿈 규칙의 차이점
strict
에서 줄바꿈이 금지되고, normal
과 loose
에서만 허용되는 경우
- 일본어의 작은 가나(small kana) 또는 장음 부호(ー) 앞에서는 줄바꿈을 하지 않음.
- 해당 문자는 Unicode Line Breaking Class
CJ
에 속함.
예시
- っ - 작은 가타카나 "tsu"
- ー - 장음부호
중국어 또는 일본어인 경우에만 normal
와 loose
에서 허용되는 줄바꿈
하이픈(-, Hyphen) 유사 문자 앞에서 줄바꿈 가능.
- 〜 -
U+301C
- ゠ -
U+30A0
loose
에서만 허용되는 줄바꿈
- 앞 문자가 Unicode Line Breaking Class
ID
인 경우(또는word-break: break-all
로 인해ID
로 처리되는 경우) 하이픈 문자 앞에서 줄바꿈 허용-
‐ -
U+2010
-
‐ -
U+2013
-
‐ -
- 반복 기호(iteration marks) 앞에서 줄바꿈 허용
-
々 -
U+3005
-
〻 -
U+303B
-
ゝ -
U+309D
-
ゞ -
U+309E
-
ヽ -
U+30FD
-
ヾ -
U+30FE
-
々 -
- 붙어 있어야 하는 구두점 문자(IN class) 사이에서 줄바꿈 허용
-
‥ -
U+2025
-
… -
U+2026
-
‥ -
중국어나 일본어일 때만 loose
에서 허용되는 줄바꿈
- 중앙 배치 구두점 앞에서 줄바꿈 허용
-
・(
U+30FB
), :(U+FF1A
), ;(U+FF1B
), ・ (U+FF65
) -
‼ (
U+203C
), ⁇(U+2047
), ⁈(U+2048
), ⁉(U+2049
) -
!(
U+FF01
), ?(U+FF1F
)
-
・(
- 접미사(suffix) 앞에서 줄바꿈 허용
-
Unicode
PO
클래스이며,Ambiguous
,Fullwidth
,Wide
로 분류되는 문자
-
Unicode
- 접두사(prefix) 뒤에서 줄바꿈 허용
-
Unicode
PR
클래스이며,Ambiguous
,Fullwidth
,Wide
로 분류되는 문자
-
Unicode
참고사항
- 위 줄바꿈 규칙은 주로 CJK 문자에 영향을 미침
- 명시적으로
lang="zh"
,lang="ja"
가 설정되어야 UA(User Agent, 브라우저)가 올바르게 적용할 수 있음.
요약
줄바꿈 위치 | strict |
normal |
loosel |
---|---|---|---|
작은 가나, 장음부호 앞 | 아니오 | 예 | 예 |
CJK 하이픈 유사 문자 앞 | 아니오 | 예(CJK만) | 예(CJK만) |
일반 하이픈 앞(ID 클래스) | 아니오 | 아니오 | 예 |
반복 기호 앞 | 아니오 | 아니오 | 예 |
붙어 있는 기호 사이(IN 클래스) | 아니오 | 아니오 | 예 |
중앙 구두점 앞 | 아니오 | 아니오 | 예(CJK만) |
접미사 앞 / 접두사 뒤 | 아니오 | 아니오 | 예(CJK만) |
예제
<div class="box">
<p lang="ja" class="auto">
auto:
<br>
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
</p>
<p lang="ja" class="loose">
loose:
<br>
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
</p>
<p lang="ja" class="normal">
normal:
<br>
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
</p>
<p lang="ja" class="strict">
strict:
<br>
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉。
</p>
<p lang="ja" class="anywhere">
anywhere:
<br>
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
</p>
</div>
.box {
display: inline-flex;
gap: 1em;
flex-wrap: wrap;
}
p {
border: 1px dashed red;
width: 200px;
}
.auto {
line-break: auto;
}
.loose {
line-break: loose;
}
.normal {
line-break: normal;
}
.strict {
line-break: strict;
}
.anywhere {
line-break: anywhere;
}
auto:
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
loose:
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
normal:
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
strict:
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉。
anywhere:
「すごい‥‥信じられない…!」「あれは…“幻影”か?」と彼はつぶやいた――いや、そんなはずはない。アイテム々・装備品・スキル:『超絶・必殺技‼』の力で敵を圧倒するしかない!そして、パートナーは『ユウキ・リナ』――彼女の力も借りて、“真のラスボス”を倒す運命にある⁉
브라우저 호환성
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
line-break
|
58 | 14 | 69 | 11 |
anywhere
|
83 | 83 | 69 | 13 |
명세서
명세서 사양 | |
---|---|
line-break
|
CSS Text Module Level 3 #line-break-property |