line-break 속성의 정의 및 사용법

line-break 속성은
요소 안의 텍스트에서 줄바꿈 규칙을 얼마나 엄격하게 적용할지를 지정합니다.

특히 자동 줄바꿈(soft wrapping) 시, 가독성을 높이기 위해 구두점이나 기호 다음에서 줄을 바꿀 수 있도록 얼마나 허용할지를 조절합니다.

line-break 속성의 작동 원리를 이해하려면 '자동 줄바꿈(soft wrapping)'에 대한 이해가 필요합니다.

자동 줄바꿈(soft wrapping)

자동 줄바꿈은 텍스트 라인의 끝이 요소 컨테이너에 도달하면 컨테이너에 도달하면 자동으로 다음의 새로운 줄로 줄바꿈하는 것을 말합니다.
흔히 텍스트를 쓸 때 내용이 길어져서 한 줄로 다 쓰지 못하고, 화면이나 컨테이너의 경계를 넘어서면 자연스럽게 줄을 바꿔 새로운 줄에 내용을 표시하는 방식입니다.

line-break 속성의 역할

요소 컨테이너에서 텍스트가 자동 줄바꿈할 때 영어의 경우에는 일반적으로 단어와 단어 사이의 공백에서 자동 줄바꿈하지만, CJK(Chinese - Japanese - Korean, 중국어·일본어·한국어)는 음절 단위에서 자동 줄바꿈합니다. 특히, 일본어와 중국어는 띄어쓰기가 없는 글자입니다.

단, 한국어의 경우에는 word-break 속성의 값이 keep-all로 설정된 경우는 영어처럼 단어와 단어 사이의 공백에서 줄바꿈합니다.

다음의 예시를 통해 확인해 보세요.

HTML 
<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>
CSS 
p {
    border: 1px dashed red;
    width: 200px;
}
실제 적용된 모습

가독성을 높이기 위해 사용

line-break 속성은 이렇게 공백이 아닌 글자가 자동 줄바꿈할 때 가독성을 높이기 위해서 구두점이나 기호 다음에서 줄을 바꿀 수 있도록 얼마나 허용할지를 조절하기 위해 사용됩니다.

CJK(중국어, 일본어, 한국어)에 line-break 속성을 적용하면 텍스트의 가독성을 높이는데 매우 유용합니다.

형식 구문

CSS 
selector {
    line-break: auto | loose | normal | strict | anywhere
}

구문

CSS 
/* 키워드 값 */
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;

형식 정의

line-break 속성의 형식 정의
초깃값 auto
적용대상 텍스트가 있는 모든 요소
상속 예
애니메이션 아니오

알아두세요!
단어와 단어 사이의 공백에서 줄바꿈하는 텍스트에는 line-break 속성이 효과가 없습니다.
또한, white-space 속성으로 줄바꿈을 허용하지 않게 설정하면 line-break 속성이 효과가 없습니다. 예를 들어, white-space: nowrap이나 white-space: pre로 설정된 텍스트는 line-break 속성이 효과가 없습니다.

값

이 속성은 요소 내에서 적용되는 줄 바꿈 규칙의 엄격성(strictness)을 지정합니다. 특히 자동 줄바꿈이 구두점 및 기호와 상호 작용하는 방식입니다. 값은 다음과 같은 의미를 갖습니다.

line-break 속성의 값
auto 초깃값임.
브라우저는 기본 줄 바꿈 규칙을 자동으로 적용합니다. 줄의 길이에 따한 제한하는 엄격성을 변경할 수 있습니다. 예를 들어, 짧은 줄에는 덜 제한적인 줄바꿈 규칙을 사용합니다.
loose 가장 제한이 적은 줄바꿈 규칙을 사용하여 텍스트를 나눕니다. 일반적으로 요소 컨테이너가 좁아 짧은 줄에 사용합니다.
normal 가장 일반적인 줄바꿈 규칙을 적용합니다.
strict 가장 엄격한 줄바꿈 규칙을 적용합니다.
anywhere 어디에서나 줄바꿈할 수 있습니다. 이때, 줄바꿈 지점에는 하이픈(-, Hyphen) 문자가 삽입되지 않습니다.

줄 바꿈 규칙의 엄격성 수준(strictness levels)

line-break 속성은 텍스트 줄바꿈을 얼마나 엄격하게 처리할지를 지정하며, 다음과 같은 네 가지 수준이 존재합니다.

  • auto - 초깃값
  • loose - 느슨한 줄바꿈
  • normal - 표준 줄바꿈
  • strict - 엄격한 줄바꿈

이 중 loose, normall, 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로 분류되는 문자
  • 접두사(prefix) 뒤에서 줄바꿈 허용
    • Unicode PR 클래스이며, Ambiguous, Fullwidth, Wide로 분류되는 문자

참고사항

  • 위 줄바꿈 규칙은 주로 CJK 문자에 영향을 미침
  • 명시적으로 lang="zh", lang="ja"가 설정되어야 UA(User Agent, 브라우저)가 올바르게 적용할 수 있음.

요약

줄 바꿈 규칙의 엄격성 수준 요약
줄바꿈 위치 strict normal loosel
작은 가나, 장음부호 앞 아니오 예 예
CJK 하이픈 유사 문자 앞 아니오 예(CJK만) 예(CJK만)
일반 하이픈 앞(ID 클래스) 아니오 아니오 예
반복 기호 앞 아니오 아니오 예
붙어 있는 기호 사이(IN 클래스) 아니오 아니오 예
중앙 구두점 앞 아니오 아니오 예(CJK만)
접미사 앞 / 접두사 뒤 아니오 아니오 예(CJK만)

예제

HTML 
<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>
CSS 
.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;
}
실제 적용된 모습

브라우저 호환성

line-break 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
line-break 58 14 69 11
anywhere 83 83 69 13

명세서

line-break 속성의 명세서 사양
명세서 사양
line-break CSS Text Module Level 3
#line-break-property

같이 보기