CSS 텍스트 줄바꿈: 균형

균형 잡힌 텍스트 블록을 위해 줄바꿈을 직접 작성하는 전통적인 서체 기법이 CSS에 도입됩니다.

Adam Argyle

text-wrap의 balance 값은 CSS 텍스트 수준 4의 일부입니다. 이 게시물의 예를 살펴보고 이 CSS 한 줄은 텍스트 레이아웃을 크게 개선할 수 있습니다.

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> 114명
• <ph type="x-smartling-placeholder"></ph> 114명
• <ph type="x-smartling-placeholder"></ph> 121명
• <ph type="x-smartling-placeholder"></ph> 17.5

소스

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 데모 사용해 보기

text-wrap: balance가 없는 경우, 디자이너, 콘텐츠 편집자 및 게시자는 몇 가지 도구 라인의 균형점을 바꾸려고 합니다. 사용 가능한 가장 좋은 옵션은 <wbr> 또는 ­ 필요 를 사용하면 텍스트 레이아웃에서 줄과 단어를 구분할 위치에 관한 더 스마트한 결정을 내릴 수 있습니다.

개발자는 언어의 최종 크기나 글꼴 크기, 심지어 언어까지도 모릅니다. 제목 또는 단락이 있습니다. 효과적이고 미적 감각을 발휘하는 데 필요한 모든 변수가 텍스트 줄바꿈 처리가 브라우저에 있습니다. 광고 제목으로 다음과 같이 래핑합니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> 데모 사용해 보기

.unbalanced {
  max-inline-size: 50ch;
}

CSS Text 4의 text-wrap: balance를 사용하면 브라우저에 텍스트에 가장 균형 있는 줄바꿈 솔루션을 알아낼 수 있습니다. 브라우저 글꼴 크기, 언어, 할당 영역과 같은 모든 요소를 인식합니다. 오늘 브라우저의 균형 있는 텍스트 줄바꿈의 결과는 다음과 같습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> 데모 사용해 보기

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

디버그 정보를 오버레이하지 않고 나란히 표시하거나 고정하여 보는 것이 유용합니다.

균형 잡힌 텍스트 블록이 훨씬 더 만족스러워야 합니다. 잡습니다. 주목도가 높아지고 전반적으로 가독성이 높아진다는 것입니다.

균형 찾기

독자는 헤드라인을 가장 먼저 보게 됩니다. 시각적으로 매력적이어야 하며 쉽게 읽을 수 있습니다. 이렇게 하면 사용자의 관심을 끌고 품질과 품질을 보장 좋은 서체는 독자에게 자신감을 주고, 계속 읽어주세요.

전통적으로 이 작업은 디자이너가 직접 또는 광학적으로 수행되었습니다. 텍스트의 균형을 맞추는 것은 수학이 아니라 눈을 즐겁게 하는 것입니다. 이 주제는 자주 미터법 대 광학 정렬이라고 합니다. New York Times, 광고 제목의 균형은 사용자 만족도를 높이는 데 매우 중요합니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 데모 사용해 보기

참고: 기본 기사 텍스트의 균형이 잡히지 않아 자주 사용되는 것은 아닙니다. 독자의 시선을 사로잡아야 합니다.

서체의 텍스트 균형 조정은 프린터가 초기 인쇄 초창기로 거슬러 올라갑니다. 손으로 쓴 글자를 던집니다. 도구와 기술이 발전함에 따라 결과도 변했습니다. 요즘 디자이너들은 텍스트에 조화를 이루도록 색상, 두께, 크기 등을 설계할 수 있습니다.

하지만 웹에서는 문서가 변경되고 크기와 색상을 선택할 수 있습니다. text-wrap: balance은(는) 다음과 같은 기술을 제공합니다 작업을 바탕으로 웹과 텍스트 간의 균형을 자동화하고 활약을 펼치고 있습니다.

광고 제목 균형 유지

이는 text-wrap: balance의 기본 사용 사례이며 앞으로 그렇게 되어야 합니다. 무승부 눈이 읽을 수 있는 대칭 모양과 가독성을 확보해야 합니다. 설정 모든 헤드라인을 다음 CSS로 텍스트 줄바꿈의 균형을 이루도록 합니다.

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

이 스타일을 적용하는 것만으로는 원하는 결과를 얻을 수 없을 수도 있습니다. 텍스트를 줄바꿈해야 하므로 어딘가에 말이야. 이제 max-inline-size 드림 이 게시물의 예시에서 설정한 경우 이 스타일은 max-width과 같지만 설정할 수 있습니다. 모든 언어에 한 번

제한사항

텍스트 균형을 맞추는 작업은 결코 자유롭지 않습니다. 브라우저가 루프 오버해야 함 가장 균형 잡힌 래핑 솔루션을 찾게 됩니다. 이 실적 6줄 이하에서만 작동하는 규칙에 의해 비용이 완화됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 데모 사용해 보기

성능에 대한 고려사항

전체 디자인에 텍스트 줄바꿈 분산을 적용하지 않는 것이 좋습니다. 이것은 요청이 낭비되고 페이지 렌더링 속도에 영향을 미칠 수 있습니다.

금지사항

* {
  text-wrap: balance;
}

대신 고려하기

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

이 기능의 가장 큰 장점은 텍스트 줄바꿈을 기다릴 필요가 없다는 것입니다. 글꼴 로드의 균형을 맞추는 것입니다. 이 브라우저가 알아서 처리해 줍니다.

white-space 속성과의 상호작용

밸런싱 텍스트는 white-space 드림 속성 중 하나는 래핑 없음을 요청하고 다른 하나는 제공합니다. 공백 속성을 설정 해제하여 이 문제를 해결합니다. 다시 적용할 수 있습니다.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

균형을 조정해도 요소의 인라인 크기가 변경되지 않습니다.

균형 잡힌 텍스트를 위한 JavaScript 솔루션에는 포함하는 요소 자체의 max-width를 변경하기 때문입니다. 이 '축소 래핑'이라는 추가 이점이 있습니다. 적용됩니다. text-wrap: balance에는 이러한 효과가 없으며 다음 예에서 볼 수 있습니다.

DevTools에 표시된 너비에 끝에 어떻게 추가 공간이 있는지 확인하셨나요? 이는 래핑 스타일일 뿐 크기 변경 스타일은 아니기 때문입니다. 원인: 다음과 같이 text-wrap: balance가 그다지 좋지 않은 몇 가지 시나리오가 있습니다. 적어도 제 생각에는요. 예를 들어 카드 내부의 제목 (또는 모든 컨테이너 있습니다.

아이러니하게도 균형 있는 텍스트 줄바꿈은 포함된 요소의 불균형을 일으킵니다.

브라우저가 사용하는 기법에 대한 간단한 설명

브라우저는 가장 작은 너비를 위한 바이너리 검색을 효과적으로 수행하며 추가 행이 발생하지 않고 1개의 CSS 픽셀에서 멈춥니다 (표시되지 않음). 픽셀). 바이너리 검색의 단계를 더욱 최소화하기 위해 브라우저는 표준 선 너비의 80% 를 사용합니다.