카드 컴포넌트 제목이 두 줄로 넘어갈 때 마지막 줄에 단어 하나만 덩그러니 남는 게 계속 거슬렸다. 이런 거.
지금 바로 시작하는 실전
가이드
"가이드"만 혼자 아랫줄에 떨어져 있으니 디자인이 어설퍼 보인다. 예전엔 이걸 잡으려고 제목 문자열을 잘라서 마지막 두 단어 사이에 를 넣거나, react-wrap-balancer 같은 라이브러리를 붙였다. 근데 이제 CSS 한 줄로 끝난다.
balance — 제목용
text-wrap: balance는 각 줄의 길이를 최대한 고르게 맞춰준다. 마지막 줄에 단어 하나만 남는 상황을 브라우저가 알아서 피한다.
.card-title {
text-wrap: balance;
}
이것만 넣으면 위의 제목이 이렇게 바뀐다.
지금 바로 시작하는
실전 가이드
두 줄 길이가 비슷하게 나뉘니까 훨씬 안정적으로 보인다. 제목, 카드 헤딩, 짧은 안내 문구처럼 몇 줄 안 되는 텍스트에 딱 맞다.
주의할 점 하나. balance는 성능 때문에 브라우저가 여러 줄(대략 6줄 이하) 짜리 텍스트에만 적용한다. 본문처럼 긴 문단에 걸어봐야 효과가 없다. 제목 전용이라고 생각하면 된다.
pretty — 본문용
긴 문단에는 text-wrap: pretty를 쓴다. 줄 길이를 균등하게 맞추는 건 아니고, 문단 맨 끝 줄에 단어 하나만 남는 외톨이(orphan) 를 방지하는 데 초점이 맞춰져 있다.
.article p {
text-wrap: pretty;
}
pretty는 전체 줄을 다시 계산하지 않고 마지막 몇 줄만 다듬기 때문에 긴 본문에 걸어도 성능 부담이 거의 없다. 그래서 역할이 명확하게 갈린다.
- 제목·헤딩 →
balance(줄 길이 균형) - 본문 문단 →
pretty(끝줄 외톨이 방지)
실제로 쓸 때
전역으로 깔아두고 시작하는 게 편하다.
h1, h2, h3, .card-title {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
Tailwind을 쓴다면 text-balance, text-pretty 유틸리티가 이미 있으니 클래스만 붙이면 된다.
<h2 class="text-balance">지금 바로 시작하는 실전 가이드</h2>
<p class="text-pretty">본문 내용이 여기 길게 이어집니다...</p>
지원 범위도 넉넉하다. balance는 주요 브라우저 전부 되고, pretty도 크롬·사파리에서 지원한다. 파이어폭스는 pretty가 아직인데, 안 되는 브라우저는 그냥 기본 줄바꿈으로 떨어질 뿐 레이아웃이 깨지진 않는다. 점진적 향상(progressive enhancement)으로 부담 없이 깔아둘 수 있다는 뜻이다.
제목 줄바꿈 하나 잡겠다고 라이브러리 설치하고 컴포넌트로 감싸던 시절이 있었다. 이제 balance, pretty 두 값만 기억하면 된다. 헤딩엔 balance, 문단엔 pretty — 딱 이 정도만 챙겨도 텍스트가 훨씬 정돈돼 보인다.