디자인 아틀라스
EN
Aa 타이포그래피

텍스트 밸런스

text-wrap: balance

헤드라인이 여러 줄일 때, 각 줄의 길이가 비슷하도록 자동으로 줄바꿈 지점을 재계산하는 CSS 속성.

다른 이름: 제목 줄바꿈 균형
···
html
<div class="stage">
  <div class="col">
    <div class="tag">text-wrap: normal</div>
    <h3 class="normalwrap">디자인은 결국 커뮤니케이션 문제를 푸는 일이다</h3>
  </div>
  <div class="col">
    <div class="tag good">text-wrap: balance</div>
    <h3 class="balancewrap">디자인은 결국 커뮤니케이션 문제를 푸는 일이다</h3>
  </div>
</div>
css
.stage{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:0 8px}
.col{display:grid;max-width:180px}
h3{font:800 17px/1.4 system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--fg);margin:0;animation:resize 5s ease-in-out infinite}
.normalwrap{text-wrap:normal}
.balancewrap{text-wrap:balance}
@keyframes resize{0%,100%{width:150px}50%{width:190px}}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--muted);margin-bottom:6px}
.tag.good{color:var(--accent-3)}

기본 줄바꿈(`normal`)은 한 줄씩 그리디하게 채우다 보니, 제목이 "긴 줄 + 짧은 줄" 또는 "짧은 단어 하나만 남은 마지막 줄"로 어색하게 끝나기 쉽습니다. 디자이너들은 오랫동안 수동으로 `<br>`을 넣어 이 균형을 맞춰왔습니다.

`text-wrap: balance`는 브라우저가 문단 전체를 미리 보고 줄 수를 유지한 채 각 줄 폭이 비슷해지는 지점을 찾아줍니다. 뷰포트가 바뀌어도 재계산되므로, 반응형에서 수동 `<br>`이 필요 없어집니다.

계산 비용 때문에 브라우저(Chromium)가 대략 6줄 이하의 텍스트에만 적용하도록 제한을 둡니다 — 긴 본문 문단에는 대신 `text-wrap: pretty`(앞 항목 "위도우와 오펀" 참고)를 씁니다.

언제 쓰나

히어로 헤드라인, 카드 제목, 모달 타이틀처럼 짧고 여러 줄로 꺾이는 제목에. 긴 본문에는 쓰지 마세요(적용 안 됨).