[text-wrap] 제목 줄바꿈을 고르게, 본문 고아 단어를 없애는 CSS 한 줄

한 줄 요약 - text-wrap: balance는 제목 줄들을 비슷한 길이로 맞추고, pretty는 본문 마지막 줄에 단어 하나만 외롭게 남는 걸 줄여줍니다. CSS 한 줄이면 됩니다.

이럴 때 필요해요

제목이 두세 줄로 넘어갈 때 마지막 줄에 짧은 단어 하나만 덩그러니 남으면 어딘가 어색해 보입니다. 예전에는 디자이너가 원하는 모양을 맞추려고 제목 중간에 직접 줄바꿈 태그를 넣거나, 화면 폭이 바뀔 때마다 자바스크립트(JS)로 줄을 다시 계산했습니다. 폭이 조금만 달라져도 그 수동 줄바꿈은 금방 망가집니다. text-wrap은 이 작업을 브라우저에게 통째로 맡깁니다.

어떻게 동작하나

1. 제목 요소에 text-wrap: balance를 주면 브라우저가 줄바꿈 위치를 다시 계산해서 각 줄의 길이가 비슷해지도록 나눕니다.

2. 본문 단락에 text-wrap: pretty를 주면 마지막 줄에 고아 단어(orphan, 혼자 남는 단어)가 생기지 않도록 줄바꿈 품질을 끌어올립니다.

3. 글상자 너비를 바꿔 보면 같은 글이라도 줄바꿈 위치가 달라지면서 효과 차이가 더 또렷하게 보입니다.

핵심은 이거예요

들쭉날쭉한 제목 줄 길이와 외롭게 남는 마지막 단어를 CSS 한 줄로 해결한다는 점입니다. 수동 줄바꿈도, JS 계산도 필요 없고 글이나 폭이 바뀌어도 알아서 다시 맞춰집니다.

놓치기 쉬운 것

• balance는 주요 브라우저에서 폭넓게 지원되지만 pretty는 아직 크롬 계열 위주라, 다른 엔진에서는 그냥 기본(normal) 줄바꿈처럼 보일 수 있습니다. 다만 미지원이어도 normal로 자연스럽게 폴백되니 화면이 깨지지는 않습니다.

• balance는 짧은 텍스트(제목)에 쓰라고 만든 기능이라 긴 본문 전체에 걸면 성능에 부담이 될 수 있습니다. 긴 단락은 pretty가 더 알맞습니다.

이런 곳에 써요

• 랜딩 페이지의 큰 히어로 제목이나 카드 제목 - 줄 길이를 고르게 맞춰 정돈된 인상을 줄 때.

• 블로그/문서 본문 단락 - 마지막 줄에 단어 하나만 남는 어색함을 줄여 읽기 편하게 만들 때.