CSS 텍스트 줄바꿈의 기본 원리

웹 개발을 하다 보면 텍스트가 예상과 다르게 줄바꿈되어 당황한 경험이 있을 겁니다. 긴 URL이 컨테이너를 뚫고 나가거나, 한글과 영어가 섞인 텍스트가 어색하게 잘리는 현상 말이죠. 이런 문제들을 해결하려면 먼저 브라우저가 텍스트를 어떻게 처리하는지 이해해야 합니다.

브라우저의 텍스트 렌더링 과정

브라우저가 텍스트를 화면에 그리는 과정을 단계별로 살펴보겠습니다.

<p>Hello 안녕하세요 https://example.com</p>;

// 라틴 문자: H, e, l, l, o
// 한글: 안, 녕, 하, 세, 요
// 기호: :, /, /

Hello |안녕하세요 |https://|example.|com
// |는 줄바꿈 가능 지점

자동 줄바꿈의 기본 규칙

브라우저는 텍스트 종류에 따라 자동 줄바꿈 우선순위가 달라집니다. 아래 예제로 비교해볼게요.

위 예제에서 각 텍스트 타입이 어떻게 다르게 줄바꿈되는지 관찰해보세요.

언어별 줄바꿈 규칙의 차이점

라틴 문자 (영어, 유럽 언어)

"Hello world" → "Hello |world"

"self-contained" → "self-|contained"
"happening" → 줄바꿈 불가 (단어 중간)

CJK 문자 (중국어, 일본어, 한국어)

"안녕하세요" → "안|녕|하|세|요"

// 줄 끝 금지: ( [ { 「 『
// 줄 시작 금지: ) ] } 」 』 , . ! ?

줄바꿈 기회(Break Opportunities) 이해하기

브라우저가 어떤 지점을 줄바꿈 기회로 인식하는지 아래 예제로 확인해볼게요.

컨테이너 오버플로우가 발생하는 경우

텍스트가 컨테이너를 삐져나가는 상황을 실제로 재현해봅시다.

Unicode 줄바꿈 알고리즘

브라우저는 Unicode Line Breaking Algorithm (UAX #14)을 따라 줄바꿈을 결정합니다. 이 알고리즘은 각 Unicode 문자에 줄바꿈 속성을 부여하고, 인접한 문자들의 조합에 따라 줄바꿈 가능성을 판단합니다.

주요 줄바꿈 클래스만 몇 가지 꼽아보면 이렇습니다. 일반 알파벳은 AL(Alphabetic), 한중일 표의 문자는 ID(Ideographic), 공백 문자는 SP(Space)에 해당해요. 그리고 하이픈처럼 뒤에서 줄바꿈이 허용되는 문자는 BA(Break After), 앞에서 줄바꿈이 허용되는 문자는 BB(Break Before)로 분류됩니다.

다음 편 미리보기

이번 편에서는 브라우저의 기본 텍스트 처리 방식을 알아봤습니다. 다음 편 word-break 속성 완벽 가이드 에서는 word-break: normal vs break-all vs keep-all의 정확한 차이, 언어에 따라 다르게 동작하는 설정, 실무에서 자주 마주치는 오버플로우 해결법, 그리고 overflow-wrap과의 조합 활용법까지 다뤄볼 예정입니다.

브라우저의 기본 동작을 이해했다면, 이제 CSS로 이를 어떻게 제어할 수 있는지 알아볼 차례입니다!