제목 마지막 줄에 한 단어만 떨어지는 것을 CSS 한 줄로 고친 방법

문제 발생

카드 제목이 길어질 때마다 마지막 줄에 단어 하나만 떨어져서(고아 줄) 보기 나빴습니다. 제목 길이가 데이터에 따라 달라지니 max-width를 손으로 맞출 수도 없었습니다.

사용자 글에 dangerouslySetInnerHTML을 썼다가
스크립트가 실행된
사고

<br>을 직접 넣는 방법은 화면 폭이 바뀌면 더 이상해졌습니다.

원인 분석

기본 줄바꿈 알고리즘은 한 줄씩 최대한 채우는 방식입니다. 빠르지만 마지막 줄에 뭐가 남는지는 신경 쓰지 않습니다.

CSS에는 이 트레이드오프를 고르는 속성이 있습니다.

balance에는 줄 수 제한이 있습니다. 계산 비용이 커서 Chromium은 6줄 이하, Firefox는 10줄 이하에만 적용합니다. 그래서 본문 전체에 걸어도 대부분 무시됩니다 — 제목용입니다. 반대로 pretty는 긴 본문을 위한 것이고 역시 성능 대가가 있습니다.

2024년 10월부터 Baseline입니다.

해결 방안

1. 제목에는 balance를 겁니다.

h1, h2, h3,
.card-title {
  text-wrap: balance;
}

2. 본문에는 pretty를 씁니다. 목적이 다릅니다 — 줄 균형이 아니라 마지막 줄이 너무 짧아지는 것을 막는 쪽입니다.

p, .summary {
  text-wrap: pretty;
}

3. 폭도 함께 제한합니다. 균형을 맞춰도 한 줄이 지나치게 길면 읽기 어렵습니다. 이 저장소가 본문 컬럼을 별도 폭으로 두는 이유와 같습니다.

.card-title { text-wrap: balance; max-width: 30ch; }

4. 모든 텍스트에 걸지 않습니다. balance는 줄 수 제한 때문에 대부분 무시되고, pretty는 느립니다. 제목과 본문에 각각 맞는 값을 주는 편이 낫습니다.
5. 미지원 브라우저에서는 그냥 무시됩니다. 값을 모르면 auto처럼 동작하므로 폴백을 따로 쓸 필요가 없습니다 — 점진적 향상으로 안전한 속성입니다.
6. text-wrap은 단축 속성입니다. text-wrap-mode(wrap/nowrap)와 text-wrap-style(auto/balance/pretty/stable)을 함께 설정합니다.

공식 문서

• MDN: text-wrap-style
• MDN: text-wrap
• MDN: text-wrap-mode