Cette page a été traduite par l'API Cloud Translation.

Encapsulation de texte CSS: jolie

Activez le retour automatique à la ligne, pour plus de rapidité et de beauté.

Adam Argyle

À partir de Chrome 117, vous pouvez utiliser une nouvelle fonctionnalité de retour à la ligne : text-wrap: pretty de CSS Text Level 4.

p {
  text-wrap: pretty;
}

</ph>

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

. .

Les veuves et orphelins typographiques sont célibataires des mots qui se trouvent seuls à la fin d'un paragraphe ou d'un bloc de texte. Les veuves sont des mots seuls en haut d'un bloc de texte, et les orphelins sont seuls à la fin d'un texte . Ils peuvent nous empêcher de parcourir le texte, ce qui rend le contenu plus difficile à lire. Certains concepteurs les évitent à tout prix et font preuve de beaucoup d'efforts pour les empêcher.

Un paragraphe est affiché avec une veuve au début et un orphelin à la fin, alors qu'un même paragraphe n'inclut pas les orphelins ni les veuves. — </ph> Image issue de Google Fonts : Widows et Orphelins

À partir de Chrome 117, il est possible d'éviter les orphelins avec une seule ligne de CSS: text-wrap: pretty.

Remarque:text-wrap: pretty est différent des CSS Propriété orphans ce qui est particulièrement utile si vous utilisez plusieurs colonnes de CSS mise en page. De plus, pretty ne gère que les orphelins, pas les veuves.

Cette fonctionnalité fait un peu plus que simplement s'assurer que les paragraphes ne se terminent pas par une le trait d'union est ajusté si des lignes consécutives apparaissent à la fin d'un paragraphe ou ajuste les lignes précédentes pour faire de la place. De plus, elle s'ajustent de manière appropriée pour justifier le texte. text-wrap: pretty correspond à les retours à la ligne et les sauts de texte sont généralement plus efficaces. Pour le moment, ils sont axés sur les orphelins. À l'avenir, text-wrap: pretty proposera peut-être d'autres améliorations.

Comparaison d'un paragraphe avec des orphelins et un autre sans orphelin, chacun portant le badge "Mauvais" ou "Bien" — </ph> Image tirée de la section Pourquoi supprimer les orphelins de votre corps de texte.

Il existe également text-wrap: balance, qui ne évite les orphelins, mais veille à ce que le texte retourne à la ligne bloc de texte harmonieux. J'utilise personnellement balance pour les titres et pretty pour paragraphes.

Si vous souhaitez en savoir plus sur l'algorithme utilisé pour déterminer nombre optimal de lignes ou considérations de performances, voici un lien vers le document de conception créé par l'ingénieur à l'origine du dessin, Koji Ishii.

Si vous avez d'autres suggestions d'amélioration du saut de ligne ou de suggestion, n'hésitez pas à nous en faire part. eux ! Signalez un problème dans l'outil de suivi des bugs de Chromium en fournissant des informations détaillées, des exemples de et les mauvais sauts de ligne. Nous vous recontacterons.