텍스트 줄바꿈은 왜 항상 어색할까

웹에서 텍스트를 다루다 보면 줄바꿈 관련 CSS를 자주 마주칩니다. 긴 URL이 컨테이너를 뚫고 나가거나, 한글 단어가 중간에서 어색하게 끊기거나, 말줄임표(…)가 원하는 대로 나오지 않습니다. 대부분 이 속성들을 제대로 이해하지 못해 생기는 문제입니다.

white-space, word-break, overflow-wrap, line-break, hyphens, text-overflow, text-wrap 들은 이름도 비슷하고 역할도 겹쳐 보여 헷갈리기 쉽습니다. 각각이 무엇을 담당하는지 정리합니다.

세 갈래로 나누기#

텍스트 줄바꿈은 세 갈래로 나누면 정리하기 쉽습니다.

1. 공백과 개행을 어떻게 처리할 것인가? white-space
2. 줄바꿈이 필요할 때 어디서 끊을 것인가? word-break, overflow-wrap, line-break, hyphens
3. 넘치는 텍스트를 어떻게 보여줄(혹은 숨길) 것인가? overflow + text-overflow, line-clamp

공백과 개행 처리#

white-space는 요소 안의 공백 문자(스페이스, 탭, 줄바꿈)를 어떻게 처리하고 줄바꿈을 허용할지를 결정합니다.

• 합침(collapse): 연속된 공백이 하나로 합쳐지고 앞뒤 공백이 제거됩니다. HTML의 기본 동작입니다.
• 보존(preserve): <pre> 태그처럼 소스에 적은 공백과 줄바꿈이 그대로 표시됩니다.

/* 한 줄로 강제하고 싶을 때 */
.single-line {
  white-space: nowrap;
}

/* 코드 블록처럼 공백을 살리되, 넘치면 줄바꿈은 하고 싶을 때 */
.code-like {
  white-space: pre-wrap;
}

break-spaces는 pre-wrap과 거의 같습니다. 줄 끝에 걸린 연속 공백이 사라지지 않고 자리를 차지한 채 다음 줄로 넘어간다는 점만 다릅니다.

예시 문장에는 연속된 공백과 탭, 개행이 섞여 있습니다. 값을 바꾸면 차이를 확인할 수 있습니다.

어디서 끊을지#

word-break는 줄바꿈이 일어날 때 단어 사이가 아니라 글자 사이에서 끊을 수 있는지를 결정합니다.

• normal: 기본 규칙대로. 영어는 공백 기준, CJK(한중일)는 글자 단위로 끊습니다.
• break-all: 넘칠 것 같으면 아무 글자 사이에서나 끊습니다. 영어 단어도 중간에서 잘립니다.
• keep-all: CJK 텍스트를 글자 단위로 끊지 않습니다. 한글은 어절 단위로만 줄바꿈됩니다.

한국어에서 가장 중요한 값은 keep-all입니다. 기본값(normal)으로 두면 한글이 어절 중간에서 끊깁니다.

오늘은 텍스트 줄바꿈에 관여하는 CSS 속성을 정리
해보려고 합니다

word-break: keep-all을 주면 "정리해보려고"가 통째로 다음 줄로 넘어갑니다.

.korean-text {
  word-break: keep-all;
}

다만 keep-all만으로는 공백 없는 긴 문자열(예: 긴 URL)을 막지 못합니다. 그래서 보통 overflow-wrap과 함께 씁니다.

넘칠 때만 단어 안에서 끊기#

overflow-wrap(구 word-wrap)은 한 단어가 너무 길어 한 줄에 안 들어갈 때만 단어 안에서 끊도록 허용합니다.

• normal: 정상적인 끊김 지점(공백 등)에서만 줄바꿈.
• break-word: 넘치는 단어에 한해 단어 안에서 끊음.
• anywhere: break-word와 비슷하지만 요소의 최소 너비(min-content) 계산에도 영향을 줍니다.

word-break: break-all과 overflow-wrap: break-word의 차이가 가장 헷갈립니다.

• word-break: break-all: 공간이 남아 있어도 줄 끝에 오면 무조건 글자를 끊습니다.
• overflow-wrap: break-word: 다른 방법으로는 안 들어갈 때만 최후의 수단으로 단어를 끊습니다.

일반적인 문단이라면 overflow-wrap: break-word가 자연스럽습니다. 한국어 문단의 이상적인 조합은 다음과 같습니다.

.article-paragraph {
  word-break: keep-all; /* 한글은 어절 단위로 */
  overflow-wrap: break-word; /* 단, 긴 URL 등은 강제로 끊어서 넘침 방지 */
}

CJK 문장부호의 줄바꿈 규칙#

line-break는 CJK 텍스트에서 문장부호나 작은 가나 문자 등을 얼마나 엄격하게 줄바꿈할지를 정합니다.

• auto, loose, normal, strict, anywhere

여는 괄호 (나 문장부호가 줄 끝·줄 시작에 오는 것을 얼마나 허용할지가 값마다 달라집니다. 한국어에서 손댈 일은 드물지만, 일본어 조판이나 촘촘한 UI 텍스트에서는 strict가 유용합니다.

아래 예시는 일본어 문장입니다. auto, loose, normal, strict는 브라우저(특히 Chrome)에서 거의 같게 렌더링됩니다. anywhere를 고르면 이런 규칙을 무시하고 문장부호 앞이나 단어 중간에서도 끊어, 。가 줄 첫머리에 오거나 홀로 떨어집니다.

하이픈으로 단어 끊기#

hyphens는 줄바꿈할 때 단어를 하이픈(-)으로 이어 끊을지를 정합니다. 영어, 독일어처럼 하이프네이션 규칙이 있는 언어에서만 의미가 있습니다.

• none: 하이픈 삽입 안 함.
• manual: ­(soft hyphen)나 -가 있는 곳에서만.
• auto: 브라우저가 사전 기반으로 자동 삽입. lang 속성이 반드시 있어야 합니다.

<p lang="en" style="hyphens: auto;">An extraordinarily long word gets hyphenated automatically.</p>

한글은 하이프네이션 대상이 아니라 hyphens의 영향을 거의 받지 않습니다.

넘치는 텍스트에 말줄임표#

text-overflow는 잘려서 보이지 않는 텍스트를 어떻게 표시할지 정합니다.

• clip(기본): 그냥 잘라냄.
• ellipsis: 말줄임표(…)로 표시.
• "문자열": 원하는 문자열로 표시(브라우저 지원 제한적).

text-overflow는 혼자서는 동작하지 않습니다. 넘침이 발생해야 하고(overflow: hidden), 한 줄로 유지되어야(white-space: nowrap) 합니다.

한 줄 말줄임#

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

여러 줄 말줄임#

여러 줄 말줄임은 text-overflow로는 안 되고 -webkit-line-clamp를 씁니다. 비표준이었지만 line-clamp로 표준화가 진행 중이라 대부분의 브라우저에서 동작합니다.

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2줄까지 표시 후 말줄임 */
  line-clamp: 2;
  overflow: hidden;
}

clip과 ellipsis 차이는 아래에서 확인할 수 있습니다. (한 줄 말줄임 기준)

줄바꿈의 심미성#

text-wrap은 비교적 최근에 추가된 속성으로, 줄바꿈 자체보다 어떻게 예쁘게 나눌지를 다룹니다.

• wrap(기본), nowrap
• balance: 여러 줄의 길이를 균등하게 맞춥니다. 제목처럼 짧은 텍스트에 좋습니다.
• pretty: 마지막 줄에 한 단어만 덜렁 남는 것을 방지합니다. 본문에 적합합니다.

h1,
h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}