CSS 텍스트 줄바꿈: 예쁜

속도보다 디자인을 중시하는 경우 최적화된 텍스트 줄바꿈을 선택하세요.

Adam Argyle

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

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

서체 과부 및 고아는 단락이나 텍스트 블록의 끝에 단독으로 표시되는 단일 단어입니다. 과잉 단락은 텍스트 블록 상단에 단독으로 표시되는 단어이고, 과잉 단락은 텍스트 블록 끝에 단독으로 표시되는 단어입니다. 눈이 텍스트를 훑어보는 방식을 방해하여 콘텐츠를 읽기 어렵게 만들 수 있습니다. 일부 디자이너는 이를 피하기 위해 최선을 다하고 이를 방지하기 위해 많은 노력을 기울입니다.

단락이 시작 부분에 과부 구두점과 끝 부분에 고아 구두점이 있는 상태로 표시되어 있습니다. 과부 구두점이나 고아 구두점이 없는 동일한 단락과 비교해 보세요.
Google Fonts—Widows & Orphans에서 가져온 이미지

Chrome 117부터는 text-wrap: pretty 한 줄의 CSS로 고아를 방지할 수 있습니다.

이 기능은 단락이 단일 단어로 끝나지 않도록 하는 것 외에도 단락 끝에 연속된 하이픈이 있는 줄이 표시되는 경우 하이픈을 조정하거나 공간을 확보하기 위해 이전 줄을 조정합니다. 또한 텍스트 줄바꿈을 적절하게 조정합니다. text-wrap: pretty는 일반적으로 줄바꿈과 텍스트 줄바꿈을 개선하기 위한 것이며 현재는 행 끝부분에 텍스트가 하나만 남는 경우를 중점적으로 다룹니다. 향후 text-wrap: pretty가 더 많은 개선사항을 제공할 수 있습니다.

각각 나쁜 배지 또는 좋은 배지가 있는, 자식 없는 단락과 자식 있는 단락을 비교한 이미지
본문에서 애매한 단어를 삭제해야 하는 이유에서 가져온 이미지입니다.

text-wrap: balance도 있습니다. 이 속성은 애매한 줄을 방지하지 않지만 조화로운 텍스트 블록을 만드는 방식으로 텍스트가 줄바꿈되도록 합니다. 저는 제목에는 balance, 단락에는 pretty를 사용합니다.

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

다른 줄바꿈 개선사항이나 제안사항이 있으면 알려주세요. Chromium 버그 추적기에서 세부정보와 올바른 줄바꿈과 잘못된 줄바꿈의 예시를 포함하여 문제를 신고하면 Google에서 연락드리겠습니다.