⚖️
text-wrap: balance
제목 텍스트의 균등 줄바꿈
웹 타이포그래피에서 제목이나 짧은 텍스트 블록의 마지막 줄에 단어 하나만 남는 현상은 시각적으로 불균형합니다. text-wrap: balance를 적용하면 브라우저가 자동으로 줄바꿈 위치를 조정하여 각 줄의 길이가 최대한 비슷해지도록 합니다.
특히 제목, 인용문, 캡션 등 짧은 텍스트에 효과적이며, 긴 본문에는 성능 비용이 있을 수 있으므로 주의가 필요합니다.
적용 방법
1
제목 요소(h1~h6)에 text-wrap: balance를 적용한다
2
인용문, 캡션 등 짧은 텍스트 블록에도 적용한다
3
긴 본문에는 적용하지 않고 제목이나 짧은 텍스트에만 사용한다
4
필요에 따라 text-wrap: pretty도 함께 테스트한다
장점
- ✓ 한 줄의 CSS로 타이포그래피 품질을 크게 개선할 수 있다
- ✓ 반응형 레이아웃에서 자동으로 적용되어 유지보수가 불필요하다
단점
- ✗ 6줄 이상의 긴 텍스트에는 성능 이슈가 있을 수 있다
- ✗ 줄 길이가 의도와 다르게 조정될 수 있다
사용 사례
뉴스 사이트나 블로그의 기사 제목 타이포그래피 개선
히어로 섹션의 대형 타이틀 텍스트 균형 맞추기