CSS text-wrap: schöne

Optimierter Textumbruch für mehr Ästhetik.

Adam Argyle
Adam Argyle
X GitHub

Ab Chrome 117 können Sie die neue Funktion für den Textumbruch verwenden: text-wrap: pretty aus CSS-Textebene 4.

p {
  text-wrap: pretty;
}
<ph type="x-smartling-placeholder">
</ph>
https://codepen.io/web-dot-dev/pen/yLGmzLJ

Typografische Witwen und Waisen sind einzeln Wörter, die am Ende eines Absatzes oder Textblocks stehen. Witwen sind Wörter stehen allein am Anfang eines Textblocks und Waisenkinder stehen allein am Ende eines Textes. blockieren. Sie können das Überfliegen des Textes unterbrechen und Inhalte so erschweren zu lesen. Einige Designschaffende vermeiden sie um jeden Preis und unternehmen große Anstrengungen, um verhindern können.

<ph type="x-smartling-placeholder">
</ph> Ein Absatz wird mit einer Witwe am Anfang und einer Waise am Ende angezeigt, im Vergleich zu demselben Absatz ohne die Waisen oder Witwen. <ph type="x-smartling-placeholder">
</ph> Das Bild stammt von Google Fonts – Widows & Waisenkinder

Ab Chrome 117 können Verwaisen mit einer einzigen CSS-Zeile vermieden werden: text-wrap: pretty.

Die Funktion sorgt nicht nur dafür, dass Absätze mit einem aus einem Wort besteht, wird die Bindestrichsetzung auch angepasst, wenn aufeinanderfolgende Zeilen mit Bindestrich angezeigt werden. am Ende eines Absatzes platziert oder vorherige Zeilen anpasst, um Platz zu schaffen. Es wird auch Textausrichtung entsprechend anpassen. text-wrap: pretty ist für im Allgemeinen besserer Zeilenumbruch und besserer Textumbruch, der sich derzeit auf Waisenkinder konzentriert. In text-wrap: pretty wird es möglicherweise noch weitere Verbesserungen geben.

<ph type="x-smartling-placeholder">
</ph> Ein Vergleich eines Absatzes mit Waisenkindern und anderen ohne Waisen, die jeweils ein Abzeichen für schlecht oder gut tragen. <ph type="x-smartling-placeholder">
</ph> Das Bild stammt von Warum sollten Sie Waisenfiguren aus Ihrem Text entfernen?

Außerdem gibt es text-wrap: balance, Verwaisen verhindern, aber sicherstellt, dass der Text so umgebrochen wird, dass einen harmonischen Textblock. Ich verwende balance für Anzeigentitel und pretty für Absätze.

Wenn Sie mehr über den Algorithmus wissen möchten, der zur Bestimmung der Optimale Anzahl von Zeilen oder Überlegungen zur Leistung: Hier finden Sie einen Link zum vom Entwickler erstellten Designdokument. hinter der Funktion Koji Ishii.

Wenn Sie weitere Verbesserungen oder Vorschläge für Zeilenumbrüche haben, sie! Melden Sie ein Problem im Chromium-Bug-Tracker und geben Sie dabei Details und Beispiele für n/a