CSS 텍스트 줄바꿈: 예쁜

텍스트 줄바꿈에 최적화된 텍스트 줄바꿈 옵션을 선택하여 빠른 속도의 아름다움을 높이세요

Adam Argyle

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

p {
  text-wrap: pretty;
}

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

타이포그래피 widows 및 orphans는 단락 또는 텍스트 블록의 끝에 단독으로 표시되는 한 단어입니다. 미망인은 텍스트 블록 상단에 단독으로 있는 단어이고 텍스트 블록 끝에는 고아가 단독입니다. 눈이 텍스트를 훑어보는 데 방해가 되므로 콘텐츠를 읽기 어려워집니다. 어떤 디자이너는 무슨 수를 써서라도 이를 피하고 이를 방지하기 위해 최대한의 노력을 기울입니다.

이미지 출처: Google Fonts - Widows 및 Orphans

Chrome 117부터는 한 줄의 CSS(text-wrap: pretty)를 사용하여 분리를 방지할 수 있습니다.

참고: text-wrap: pretty는 CSS 다중 열 레이아웃을 사용할 때 관련된 CSS의 orphans 속성과 다릅니다. 또한 pretty는 연결된 배우가 아닌 고아만 처리합니다.

이 기능은 단락이 한 단어로 끝나지 않도록 보장하는 것 이상의 역할을 합니다. 또한 하이픈으로 연결된 연속된 줄이 단락 끝에 나타나거나 이전 줄을 조정하여 공간을 확보하면 하이픈 연결을 조정합니다. 또한 텍스트 정렬에 맞게 적절하게 조정됩니다. text-wrap: pretty는 일반적으로 더 나은 줄바꿈 및 텍스트 구분을 위해 사용되며 현재는 분리된 항목에 중점을 둡니다. 향후 text-wrap: pretty에서 더 많은 개선사항을 제공할 수 있습니다.

출처: 본문 텍스트에서 분리된 항목을 삭제해야 하는 이유

text-wrap: balance도 있습니다. 이 메서드는 고아를 차단하지는 않지만 조화로운 텍스트 블록을 만드는 방식으로 텍스트가 래핑되도록 합니다. 저는 개인적으로 제목에 balance를 사용하고 단락에는 pretty를 사용합니다.

최적의 줄 수를 결정하는 데 사용되는 알고리즘의 세부정보나 성능 고려사항에 관심이 있다면 이시이 코지 기능의 배후에 있는 엔지니어가 작성한 설계 문서 링크를 참고하세요.

다른 줄바꿈 개선사항이나 제안사항이 있으면 언제든지 알려주시기 바랍니다. Chromium 버그 추적기에서 문제, 올바른 줄바꿈 및 잘못된 줄바꿈의 예를 알려주시면 연락드리겠습니다.