텍스트 레이아웃, 특히 줄 끝과 단락 끝은 페이지의 가독성과 미적 매력에 영향을 미칠 수 있습니다. CSS는 특정 사용 사례를 개선할 수 있는 여러 텍스트 줄바꿈 옵션을 제공합니다.
제목과 같은 짧은 텍스트 블록에는 text-wrap: balance를 사용합니다. 이 속성은 브라우저가 텍스트를 줄 전체에 최대한 균등하게 분산하여 더 대칭적인 모양을 만들도록 지시합니다.
text-wrap: pretty CSS 속성을 사용하면 더 정교한 줄바꿈 알고리즘을 사용 설정하여 본문 텍스트의 서체 품질을 개선할 수 있습니다. 이 기능은 '외톨이 단어' (단락의 마지막 줄에 있는 단일 단어)를 방지하고 긴 텍스트 블록에 더 보기 좋은 시각적 '들쭉날쭉한 줄 바꿈'을 만들도록 특별히 설계되었습니다.
구현
1. 텍스트 요소 식별:
text-wrap: balance의 경우 제목 및 표 헤더와 같은 짧은 텍스트 블록을 선택합니다. 테두리나 배경과 같이 눈에 보이는 상자가 있는 요소는 레이아웃에 예기치 않은 시각적 빈 영역이 생길 수 있으므로 사용하지 마세요.
text-wrap: pretty의 경우 고아 단어 (짧은 줄) 또는 잘못된 줄바꿈이 가장 눈에 띄는 긴 텍스트가 포함될 수 있는 요소를 선택합니다. 여기에는 다음 요소가 포함됩니다.
<p><blockquote><li>- 긴 텍스트를 포함할 수 있는 기타 요소
적절한 래핑 방법 선택
| 기준 | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap(기본값) |
|---|---|---|---|
| 권장 용도 | 짧은 블록 (제목, 제목) | 긴 블록 (단락, 목록) | 성능에 중요한 콘텐츠 |
| 시각적 목표 | 대칭적인 줄 길이 | 분리된 요소 ('짧은 줄') 방지 | 빠른 표준 포장 |
| 선 제약 조건 | 최대 6~10줄 (알고리즘 한도) | 3줄 이상에 적합 | 제한 없음 |
| 실적 비용 | 높음: 이진 검색 알고리즘 | 중간: Look-back 알고리즘 | 낮음: 표준 그리디 알고리즘 |
2. 선택한 래핑 적용:
text-wrap: balance는 제목 (h1~h6), 부제목, 인용문과 같이 짧고 여러 줄로 된 요소에 적용합니다.
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
text-wrap: pretty를 사용하여 단락의 마지막 몇 줄을 평가하여 최적의 중단점을 찾는 최적화된 알고리즘을 사용 설정합니다.
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
중요한 제약 조건 및 성능
text-wrap: balance
- 줄 제한: 브라우저는 성능을 유지하기 위해 균형을 맞추려는 줄 수에 제한을 적용합니다 (일반적으로 Chromium에서는 6줄, Firefox에서는 10줄). 텍스트가 이 한도를 초과하면 브라우저는 표준
wrap동작으로 되돌아갑니다. 이러한 한도를 초과할 가능성이 있는 텍스트 블록에는text-wrap: balance를 사용하지 마세요. - 타겟팅된 애플리케이션:
text-wrap: balance를 전역적으로 적용하지 마세요 (예:* { text-wrap: balance; }). 브라우저에서 사용하는 반복적인 '이진 검색' 알고리즘은 계산 비용이 많이 듭니다. 특정 짧은 텍스트 요소로 사용을 제한합니다. - 너비와의 상호작용:
text-wrap: balance는 컨테이너의 너비 (inline-size)를 변경하지 않습니다. 해당 너비 내에서 텍스트가 줄바꿈되는 방식에만 영향을 미칩니다. 이로 인해 컨테이너 끝에 빈 공간이 생길 수 있으며, 이는 전체 너비 텍스트 블록을 사용하는 레이아웃에 영향을 미칠 수 있습니다.
text-wrap: pretty
- 성능과 품질: 필수:
text-wrap: pretty는 중단점을 최적화하기 위해 여러 줄(일반적으로 마지막 4줄)을 평가하므로 기본wrap(그리디) 알고리즘보다 계산 비용이 더 많이 듭니다. 페이지에 텍스트 콘텐츠가 너무 많은 경우 모든 요소에 전역적으로 적용하지 마세요. - 여러 줄 텍스트에 가장 적합:
pretty의 이점은 세 줄 이상의 단락에서 가장 두드러집니다. 짧은 한 줄 텍스트에는 거의 영향을 미치지 않습니다. - 브라우저별 동작: 구현 세부정보는 브라우저마다 다릅니다. Chromium 기반 브라우저는 일반적으로 마지막 4줄에 초점을 맞추는 반면 다른 엔진은 전체 단락을 평가할 수 있습니다.
대체 전략
text-wrap: balance 또는 text-wrap: pretty를 지원하지 않는 브라우저에서는 속성이 무시되고 기본 wrap 동작을 사용하여 텍스트가 줄바꿈됩니다. 이는 표준 서체로 단계적으로 성능이 저하되는 점진적 개선입니다. 이렇게 하면 콘텐츠가 모든 브라우저에서 완벽하게 읽을 수 있는 상태로 유지되면서 이를 지원하는 브라우저에 우수한 환경을 제공할 수 있습니다.
정교한 텍스트 레이아웃이 필요한 중요한 레이아웃의 경우 JavaScript 라이브러리를 사용하되, 이로 인해 속도가 느려지고 성능 문제가 발생할 수 있다는 점에 유의하세요.