데브허브 | DEVHUB | I Love This New CSS text-wrap FeatureI Love This New CSS text-wrap Feature
- 웹 개발에서 반응형 디자인 시 텍스트 줄바꿈 문제, 특히 제목이나 단락에서 한 단어만 다음 줄로 넘어가는 현상(고아 단어)이 흔히 발생하여 시각적으로 좋지 않음. 😠
text-wrap: balance 속성은 텍스트의 모든 줄이 거의 동일한 너비를 갖도록 균형을 맞춰줌. ⚖️
balance는 주로 짧은 제목이나 헤드라인(1~2줄)에 매우 효과적이며, 시각적 균형을 개선함. 📰
text-wrap: pretty 속성은 한 단어만 단독으로 줄바꿈되는 것을 방지하여, 최소 두 단어 이상이 함께 다음 줄로 넘어가도록 함. ✨
pretty는 긴 단락 텍스트에 특히 유용하며, 가독성과 미관을 향상시킴. 📝
- 이 두 속성을 함께 사용하면 다양한 화면 크기에서 텍스트가 더 보기 좋게 정렬되며, CSS가 자동으로 줄바꿈을 계산함. 📐
balance는 주요 브라우저에서 약 90%의 높은 지원율을 보이지만, pretty는 현재 Firefox나 Safari에서 지원되지 않음. 🌐
- 지원되지 않는 브라우저에서는 해당 속성이 적용되지 않을 뿐 사이트가 깨지지 않고 정상적으로 작동하므로, 점진적 개선(progressive enhancement) 전략으로 활용하기 좋음. 👍