CSS 텍스트 줄바꿈: 예쁜

속도보다 멋지게 텍스트 줄바꿈을 최적화해 보세요.

Adam Argyle

Chrome 117부터 새로운 텍스트 줄바꿈 기능(text-wrap: pretty)을 사용할 수 있습니다. (CSS 텍스트 수준 4)

p {
  text-wrap: pretty;
}

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

</ph>

https://codepen.io/web-dot-dev/pen/yLGmzLJ

를 참조하세요.

를 참조하세요.

활자상의 과부와 고아는 독신임 특정 단어는 포함되지 않습니다. 과부는 말이다 '고아'가 텍스트 맨 위에 단독으로 표시됨 차단될 수 있습니다. 눈이 텍스트를 훑는 방식을 방해하여 콘텐츠를 어렵게 만들 수 있습니다. 있습니다. 어떤 디자이너들은 어떤 대가를 치르더라도 이를 피하고 많은 시간을 들여 방지할 수 있습니다

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

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

</ph> 이미지 출처: Google Fonts—Widows & 분리된 페이지

Chrome 117부터 CSS(text-wrap: pretty) 한 줄로 분리된 항목을 방지할 수 있습니다.

참고: text-wrap: pretty는 CSS의 orphans 속성 이는 CSS 다중 열 레이아웃을 선택합니다. 또한 pretty는 창녀가 아닌 분리된 항목만 처리합니다.

이 기능은 단락이 마침표로 끝나지 않도록 하는 것 이상의 역할을 합니다. 하이픈이 연결된 연속된 행이 나타날 경우 하이픈이 들어간 이전 줄을 조정하여 공간을 만듭니다. 또한 텍스트 양쪽 맞춤을 적절하게 조정합니다. text-wrap: pretty: 일반적으로 더 나은 줄바꿈 및 텍스트 분리 기능을 제공하며 현재는 분리된 텍스트에 중점을 둡니다. 향후 text-wrap: pretty에서 더 많은 개선사항을 제공할 수 있습니다.

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

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

</ph> 이미지 출처: 본문 텍스트에서 분리된 텍스트를 삭제해야 하는 이유

text-wrap: balance도 있지만 텍스트 줄바꿈을 통해 텍스트 줄바꿈을 조화로운 텍스트 블록을 제공합니다. 개인적으로는 balance을(를) 사용하고, 광고 제목에 pretty을(를) 사용합니다. 단락을 구성합니다.

결과를 결정하는 데 사용되는 알고리즘에 대해 성능을 고려하려면 이 엔지니어가 만든 설계 문서 링크를 확인하세요. 이시이 코지의 뒷이야기죠.

다른 줄바꿈 개선이나 제안사항이 있으면 알려주세요. 있습니다! Chromium 버그 추적기에서 세부정보, 예시 Google에서 연락을 드릴 것입니다.