Für CSS ist eine klassische Typografietechnik zur manuellen Erstellung von Zeilenumbrüchen für ausgewogene Textblöcke verfügbar.
Der Wert balance
für text-wrap
ist Teil von CSS-Textebene 4. In den Beispielen in diesem Beitrag erfahren Sie,
können Sie Ihre Textlayouts erheblich verbessern.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Ohne text-wrap: balance
; Designschaffende, Redakteure und Publisher
wenige Tools
um die Ausbalancierung der Linien zu ändern. Die besten Optionen sind die Verwendung
<wbr>
oder
­
, um zu helfen
in Textlayouts intelligentere Entscheidungen darüber treffen, wo Zeilen und Wörter am besten platziert werden sollen.
Als Entwickler kennen Sie die endgültige Größe, die Schriftgröße oder die Sprache eines oder Absatz. Alle Variablen, die für eine effektive und ästhetische Gestaltung erforderlich sind des Textumbruchs im Browser. Deshalb sehen wir die Überschrift wie in der folgenden Abbildung:
<ph type="x-smartling-placeholder">![Die Überschrift wird in den Entwicklertools hervorgehoben und nimmt die gesamte Breite des Inline-Bereichs ein. In der zweiten Zeile befinden sich zwei hängende Wörter.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=9&hl=de)
.unbalanced {
max-inline-size: 50ch;
}
Mit text-wrap: balance
aus CSS-Text 4 können Sie den Browser auffordern,
finden Sie die beste
ausgeglichene Lösung für den Zeilenumbruch. Der Browser
kennt alle Faktoren, wie Schriftgröße, Sprache und zugewiesene Fläche.
Die Ergebnisse des im Browser ausgeglichenen Textumbruchs sehen heute so aus:
![Die Überschrift wird wie in den vorherigen Entwicklertools hervorgehoben und umfasst dieses Mal nicht die gesamte Breite. Er beginnt mit einer neuen Zeile vor dem Ende und stellt daher einen ausgewogenen Textblock dar.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=9&hl=de)
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Es ist hilfreich, sie nebeneinander, ruhig und ohne überlagerte Debug-Informationen anzuzeigen.
Ihr Auge sollte mit dem ausgewogenen Textblock zufriedener sein. Es schnappt die Aufmerksamkeit erregen und insgesamt leichter zu lesen ist.
Auf der Suche nach dem perfekten Gleichgewicht
Die Schlagzeilen sind das Erste, was die Leser sehen: sollten sie visuell ansprechend sein leicht zu lesen ist. Dies weckt die Aufmerksamkeit der Nutzenden, vermittelt einen Eindruck von Qualität und Sicherheit. Eine gute Typografie gibt den Lesern Selbstvertrauen und ermutigt sie, weiterlesen.
Traditionell wurde diese Aufgabe manuell oder optisch als Designfachkraft erledigt Der Ausgleich des Textes möchte dem Auge erfreuen und nicht der Mathematik. Dieses Thema ist oft wird als „metrisches und optische Ausrichtung“ bezeichnet. Für große Publikationen wie die New York Times Die Abwägung von Anzeigentiteln ist ein sehr wichtiges Detail der User Experience.
<ph type="x-smartling-placeholder">Das Ausbalancieren von Text in der Typografie reicht bis in die frühen Tage des Drucks zurück, als Drucker von Hand Buchstaben platziert. Mit der Weiterentwicklung der Tools und Techniken haben sich auch die Ergebnisse weiterentwickelt. Heutzutage nutzen Designschaffende Farbe, Gewicht, Größe und mehr, um Text in für ihre Designs.
Im Web gibt es allerdings weniger Kontrolle, da sich das Dokument
je nach Nutzenden anpassen. text-wrap: balance
vereint die Kunst von
den automatischen Ausgleich von Text
in das Web, baut auf der Arbeit und
Traditionen von Designern aus der Printbranche.
Anzeigentitel ausgleichen
Dies ist der primäre Anwendungsfall für text-wrap: balance
. Unentschieden
symmetrisch an die Größe anpassen und für das Auge gut lesbar sein. Festlegen
mit dem folgenden CSS-Code in einen ausgewogenen Textumbruch einfügen:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Das bloße Anwenden dieses Stils führt möglicherweise nicht zu den gewünschten Ergebnissen, da der
Der Text muss umgebrochen werden, sodass eine maximale Zeilenlänge vom
irgendwoher. Sie sehen eine
max-inline-size
Stil basierend auf den Beispielen in diesem Beitrag. Dieser Stil entspricht max-width
, kann aber geändert werden.
einmal pro Sprache.
Beschränkungen
Die Aufgabe, Text auszugleichen, ist nicht kostenlos. Der Browser muss Iterationen, um die beste ausgewogene Verpackungslösung zu ermitteln. Diese Leistung werden die Kosten durch eine Regel gemindert, sie funktioniert nur für sechs umgebrochene Zeilen und unter.
<ph type="x-smartling-placeholder">Hinweise zur Leistung
Es ist keine gute Idee, den Ausgleich zwischen Textumbruch auf das gesamte Design anzuwenden. Es ist ein aufgrund der Beschränkung von sechs Zeilen verschwendete Anfrage. Dies kann sich auf die Renderinggeschwindigkeit der Seite auswirken.
* { text-wrap: balance; }
h1, h2, h3, h4, h5, h6, blockquote { text-wrap: balance; }
Ein großer Vorteil dieser Funktion ist, dass Sie nicht warten müssen, mit dem Laden von Schriftarten, wie Sie es heute mit JavaScript tun. Die Der Browser kümmert sich darum!
Interaktionen mit der Eigenschaft white-space
Der ausgewogene Text konkurriert
white-space
da die eine keine
Wrapping-Funktion anfordert und die andere
ausgewogenen Wrapping. Sie können dies umgehen, indem Sie die Leerraumeigenschaft aufheben.
des ausgewogenen
Wrappings noch einmal angewendet werden.
.balanced {
white-space: unset;
text-wrap: balance;
}
Durch den Ausgleich wird die Inline-Größe des Elements nicht geändert.
Einige JavaScript-Lösungen bieten einen Vorteil für ausgewogenen Text.
Wrapping, da sie den max-width
des beinhaltenden Elements ändern. Dieses
hat den zusätzlichen Vorteil, dass sie zum ausgewogenen Block. text-wrap:
balance
hat diesen Effekt nicht und ist in diesem Beispiel zu sehen:
Sehen Sie, wie die Breite, die in den Entwicklertools angezeigt wird, einen Haufen zusätzlichen Platz am Ende hat?
Das liegt daran, dass es sich nur um einen Umbruchstil und keinen um einen Größenänderungsstil handelt. Aus
gibt es einige Szenarien, in denen text-wrap: balance
nicht so toll ist,
aus meiner Sicht am wenigsten. Zum Beispiel Überschriften innerhalb einer Karte (oder eines Containers)
mit Rahmen oder Schatten).
Ein ausgewogener Textumbruch führt ironischerweise zu Ungleichgewichten zum enthaltenen Element.
Eine kurze Erklärung der vom Browser verwendeten Technik
Der Browser führt effektiv eine binäre Suche für die kleinste Breite durch, keine zusätzlichen Zeilen, sondern nur ein Pixel). Um die Schritte der binären Suche weiter zu minimieren, beginnt der Browser. 80% der durchschnittlichen Linienbreite.