text-wrap

줄바꿈을 고르게, 고아 단어를 없애기

CSS 한 줄(text-wrap: balance / pretty)로 제목 줄 길이를 맞추고 본문 끝 단어가 외롭게 남는 걸 막아요.

글상자 너비

300px

제목 (headline)

text-wrap: balance

한 줄의 CSS로 제목 줄바꿈을 고르게 맞추는 가장 간단한 방법

balance - 줄 길이를 고르게 맞춤

본문 (paragraph)

text-wrap: pretty

text-wrap는 브라우저가 글을 어디서 줄바꿈할지 결정하는 방식을 바꿉니다. balance는 제목처럼 짧은 텍스트의 줄 길이를 비슷하게 맞추고, pretty는 본문 단락의 마지막 줄에 단어가 외롭게 하나만 남는 일을 줄여줍니다.

pretty - 마지막 줄 고아 단어 줄임

balance는 폭넓게 지원돼요. pretty는 아직 크롬 계열 위주라 일부 브라우저에선 normal처럼 보일 수 있어요. 미지원이면 그냥 기본 줄바꿈으로 폴백돼 깨지지 않아요.