텍스트 줄바꿈, 제대로 알아보기

텍스트는 컨테이너 너비에 맞춰 줄을 바꾼다. 기본 동작으로는 긴 URL이 컨테이너를 넘치고, 한글 어절이 중간에서 끊기고, 말줄임표가 필요한 자리에 나오지 않는다.

이럴 때 사용하는 속성이 white-space, word-break, overflow-wrap, line-break, hyphens, text-overflow, text-wrap이다.

white-space, 공백과 개행의 처리

줄을 어디서 끊을지 따지기 전에 정해야 할 것이 있다. 소스에 적힌 공백과 개행을 그대로 살릴지, 줄바꿈을 허용할지다. white-space가 이 둘을 함께 결정한다.

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

텍스트를 한 줄로 강제하려면 nowrap을 쓴다. 코드 블록처럼 공백은 살리되 넘치면 줄은 바꾸고 싶다면 pre-wrap을 쓴다.

.single-line {
  white-space: nowrap;
}

.code-like {
  white-space: pre-wrap;
}

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

아래 예시 문장에는 연속된 공백과 탭, 개행이 섞여 있다. 값을 바꾸면 차이가 보인다.

줄바꿈을 허용하기로 했다면 다음 기준은 어디서 끊을지다.

word-break, 글자 사이에서 끊을지

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

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

한국어에서 중요한 값은 keep-all이다. 기본값인 normal은 한글을 글자 단위로 끊기 때문에 어절이 중간에서 잘린다.

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

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가 가장 자주 혼동된다. 둘 다 단어 안에서 끊지만 조건이 다르다. break-all은 공간이 남아 있어도 줄 끝에 오면 글자를 끊는다. break-word는 다른 방법으로는 들어가지 않을 때만 단어를 끊는다.

일반적인 문단이라면 overflow-wrap: break-word가 자연스럽다. 한글은 어절 단위로 끊고 긴 URL만 강제로 끊어 넘침을 막으려면 두 속성을 함께 쓴다.

.article-paragraph {
  word-break: keep-all;
  overflow-wrap: break-word;
}

line-break, CJK 문장부호의 규칙

line-break는 CJK 텍스트에서 문장부호나 작은 가나 문자 등을 얼마나 엄격하게 줄바꿈할지를 정한다. 값은 auto, loose, normal, strict, anywhere다.

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

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

hyphens, 하이픈으로 단어 끊기

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

• none: 하이픈을 삽입하지 않는다.
• manual: ­(soft hyphen)나 -가 있는 곳에서만 끊는다.
• auto: 브라우저가 사전을 바탕으로 자동 삽입한다. 어떤 언어의 사전을 쓸지 알아야 하므로 lang 속성이 반드시 있어야 한다.

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

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

nowrap처럼 줄을 바꾸지 않으면 긴 텍스트는 컨테이너를 넘친다.

text-overflow, 넘친 텍스트의 표시

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

• clip: 잘린 채로 둔다. 기본값이다.
• ellipsis: 말줄임표(…)를 붙인다.
• "문자열": 지정한 문자열을 붙인다. 브라우저 지원이 제한적이다.

이 속성은 혼자서는 동작하지 않는다. 텍스트가 실제로 넘쳐야 하고(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;
  line-clamp: 2;
  overflow: hidden;
}

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

text-wrap, 줄바꿈의 모양

앞의 속성들은 줄을 끊을 수 있는지와 어디서 끊을 수 있는지를 다뤘다. text-wrap은 비교적 최근에 추가된 속성으로, 끊을 수 있는 여러 지점 가운데 어디를 고를지를 다룬다. 줄바꿈의 모양을 정하는 속성이다.

• wrap, nowrap: 줄바꿈 허용 여부다. 기본값은 wrap이다.
• balance: 여러 줄의 길이를 균등하게 맞춘다. 제목처럼 짧은 텍스트에 맞는다.
• pretty: 마지막 줄에 한 단어만 남는 것을 막는다. 본문에 맞는다.

h1,
h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

한국어 본문이라면 word-break: keep-all과 overflow-wrap: break-word를 함께 두면 대부분의 어색함이 사라진다.