So ändern Sie den Standard-Textumbruch mit HTML und CSS
Im Gegensatz zu Papier können Webseiten dies tun fast unendlich seitwärts. So beeindruckend das auch ist, es ist nicht etwas, was wir beim Lesen wirklich brauchen. Browser umbrechen den Text in Abhängigkeit vom Breite des Textcontainers und das Breite des Bildschirms damit wir den gesamten Text sehen können, ohne seitlich viel scrollen zu müssen (nur nach unten).
Verpackung Browser berücksichtigen viele Faktoren, z. B. die Sprache des Textes oder die Platzierung von Interpunktion und Leerzeichen nicht einfach runterdrücken Was passt nicht in das für den Textinhalt definierte Feld.
Anders als beim Wrapping auch Browser kümmere dich um die Räume; Sie führen mehrere aufeinanderfolgende Leerzeichen im Quellcode zu einem einzigen Leerzeichen auf der gerenderten Seite zusammen und registrieren außerdem erzwungene Zeilenumbrüche, bevor sie mit dem Wrapping beginnen.
Wann wird der Standard-Textumbruch geändert?
Das ist alles großartig und sehr geschätzt. Es kann jedoch leicht passieren, dass das Standardverhalten des Browsers nicht das ist, wonach wir suchen. Das kann eine Schlagzeile sein sollte nicht eingewickelt werden oder ein Wort in einem Absatz besser gebrochen werden, als eine Linie abzusteigen, am Ende der Zeile verbleibt ein seltsam aussehender leerer Raum.
Es kann auch passieren, dass wir einfach verzweifelt brauchen diese Räume in unserem Text, Der Browser kombiniert sie jedoch zu einem und zwingt uns, mehrere hinzuzufügen im Quellcode.
Möglicherweise werden auch Präferenzen für das Umbrechen erstellt ändern Sie sich mit der Sprache und dem Zweck des Textes. Ein Mandarin-Nachrichtenartikel und ein französisches Gedicht müssen nicht unbedingt auf dieselbe Weise verpackt werden.
Es gibt eine ganze Reihe von CSS-Eigenschaften (und HTML-Elementen!), Die dies ermöglichen steuern Sie die Umwicklung und die Haltepunkte und auch definieren, wie Leerzeichen und Zeilenumbrüche vor dem Wrapping verarbeitet werden.
Soft-Wrap-Möglichkeiten & Soft-Wraps
Browser entscheiden, wo ein überfließender Text eingefügt werden soll abhängig von Wortgrenzen, Bindestrichen, Silben, Interpunktionen, Leerzeichen und mehr. Diese Orte werden alle genannt weiche Wickelmöglichkeiten und wenn der Browser den Text an einer solchen Stelle beschädigt, wird der Bruch als bezeichnet weicher Wickelbruch.
Der einfachste Weg zu eine zusätzliche Pause erzwingen kann mit dem guten alten gemacht werden
Whitespace
Wenn Sie mit dem vertraut sind Leerraum CSS-Eigenschaft Ich wette, Sie haben es auf die gleiche Weise wie viele andere kennengelernt; bei der Suche nach einem Weg zu Verhindern Sie das Umbrechen von Text. Das jetzt rappen Wert von Leerraum macht genau das.
Jedoch die Leerraum Eigentum ist mehr als nur das Verpacken. Was ist zunächst Whitespace? Es ist ein Satz von Leerzeichen. Jeder Platz im Set unterscheidet sich voneinander in Länge, Richtung oder beides.
Ein typisches einzelnes horizontales Leerzeichen Das fügen wir durch Drücken der Leertaste hinzu. Tabulator-Taste fügt auch a ähnlicher Raum, aber mit größerer Länge. Eingabetaste fügt ein vertikaler Raum eine neue Zeile beginnen und in HTML fügt ein einzelner unzerbrechlicher Raum zu Webseiten. So gibt es viele Arten von Räumen, die ausmachen “Leerraum”.
Wie ich anfangs erwähnt habe, Browser mehrere Leerzeichen reduzieren (sowohl horizontal als auch vertikal) in der Quelle in einem einzigen Raum. Sie auch Berücksichtigen Sie diese Leerzeichen für Umschließungsmöglichkeiten (Stellen, an denen ein Text umbrochen werden kann), wenn ein Umbruch erforderlich ist.
Und genau diese Browser-Aktionen können wir mit steuern Leerraum. Notiere dass der Leerraum Die Eigenschaft wirkt sich nicht auf alle Arten von Räumen aus, nur die häufigsten wie der reguläre horizontale Einzelraum, der Tabulatorraum und der Zeilenvorschub.
Unten sehen Sie einen Screenshot eines Beispieltextes vom Browser so verpackt, dass er in seinen Container passt. Der Überlauf geschieht am unteren Rand des Containers, und der übergelaufene Text ist anders eingefärbt. Sie werden das bemerken Zusammenbruch der aufeinander folgenden Räume im Code.
EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo a¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo.
.textContainer width: 500px; Höhe: 320px;
Nach dem Auftragen Leerraum: Nowrap; In der Regel ändert sich der Umbruch des Textes auf folgende Weise:
.textContainer / *… * / white-space: nowrap;
Das Vor Wert von Leerraum bewahrt alle Leerzeichen und verhindert das Umbrechen des Textes:
.textContainer / *… * / white-space: pre;
Das Pre-Wrap Wert von Leerraum bewahrt alle Leerzeichen und umschließt den Text:
.textContainer / *… * / white-space: Pre-Wrap;
Endlich, das Pre-Line Wert von Leerraum erhält die vertikalen Leerzeichen wie neue Zeilen und umschließt den Text:
.textContainer / *… * / white-space: pre-line;
Wort bricht
Eine weitere wichtige CSS-Eigenschaft, die Sie zur Kontrolle des Textumbruchs kennen sollten, ist Wortwechsel. In allen obigen Screenshots sehen Sie, dass der Browser wickelte den Text vor dem Wort ein “Hallo” auf der rechten Seite, hinter der die Text übergelaufen. Der Browser hat das Wort nicht gebrochen.
Wenn Sie jedoch müssen, zu ... haben Erlaube das Brechen von Buchstaben in einem Wort Damit der Text auch auf der rechten Seite aussehen würde, müssen Sie die Alles Gute Wert für die Wortwechsel Eigentum:
.textContainer / *… * / word-break: Allesbruch;
Das Wortwechsel Eigenschaft hat außerdem einen dritten Wert Alles Gute und normal (gehört zum Standard-Zeilenumbruch). Das Alles behalten Wert erlaubt nicht das brechen von worten.
Sie können möglicherweise die Wirkung von nicht sehen Alles behalten auf Englisch. Aber in Sprachen, in denen Buchstaben in einem Wort sind sinnvolle Einheiten für sich, Der Browser kann beim Umbrechen die Wörter beschädigen. Dies kann durch die Verwendung von verhindert werden Alles behalten.
Zum Beispiel die Buchstaben in koreanischen Wörtern, zunächst für die Verpackung gebrochen, werden zusammengehalten wenn der Leerraum: Alles behalten; Regel ist angegeben.
EIN¬??¸EINªEIN³?? ??¥EIN¼ --¥Ã-?? ?? ?? à «?? ?? ?? ??, ??¬Â ??  ?? ?? ??¬EIN½?? ?? ?? ?? ??¡EIN?? Ã-?? ?? ??¬-A¬?? ?? ??¬??¤. EIN¬?? 10 ??-?? ?? EIN¬Â ??  ?? ?? ??¬EIN½?? ?? ?? ?? EINªEINµÂ-ì?? Ã-?? ?? ??¬?? ?? ??ª?? 1997Â…  ?? 3ì?? ?? 10 A¬??¼««¶?? ?? -12 °¬??¼EINªEIN¹??¬EIN§EIN?? Ã…  ??¬??¼EIN¬?? ?? ««§??¬??¸EIN¬EIN¦??¬Â  ??¬?? ?? EIN¬Â-´««¦EIN½? ?? ?? ?? ??.?¤. EIN¬EIN§??ªEIN¸EIN?? à «Â ??  ±?¡?? ?? ?? ?? ??¬-A¬?? ?? ??¬??¤. EIN¬??´ Ã-?? ?? ??¬?? ?? ??¬Â  ??¬?? ?? ?? ?? ?? EIN¬-… êEIN³EIN?? EIN¬?? ??? ??¬?? ?? EIN¬?? ??¬EIN¸EINªÂ «Â    ??¤EIN¬??´ Ã-??¨EINª»?? ««ªEIN¨EIN¬Â-¬ à «Â ??¤EIN¬?? ?? ??ªEIN³EIN¼ EINªÂ   ??¬?? ?? ««¶??¬??¼««¥EIN¼ à «Â ??¤«£¹? ?? ?? ?? ??.?¤.
.textContainer / *… * / word-break: keep-all;
Diese Eigenschaft unterstützt möglicherweise einen anderen aufgerufenen Wert bruchwort in der Zukunft. Du wirst sehen wie bruchwort arbeitet später im “Überlaufumwicklung” Abschnitt dieses Artikels.
Word Break-Möglichkeiten
Entwickler können auch Fügen Sie Umschlagsmöglichkeiten in Wörtern hinzu, Verwendung der
EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hello â?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo. EIN¢?? ?? Hallo.
.textContainer / *… * / white-space: Pre-Wrap;
Ohne
Bindestriche
Das Bindestriche CSS-Eigenschaft ist eine andere Möglichkeit, Brüche zwischen Buchstaben zu kontrollieren in einem Wort. Bei Interesse finden Sie einen separaten Artikel zur CSS-Silbentrennung. Kurz gesagt, die Eigenschaft ermöglicht es Ihnen Erstellen Sie Umbruchmöglichkeiten durch Silbentrennung.
Es ist Auto Wert fordert den Browser dazu auf Wörter werden automatisch getrennt und unterbrochen, wenn dies erforderlich ist während der Verpackung. Das Handbuch Wert zwingt Browser zu (bei Bedarf) Wrap bei von uns hinzugefügten Trennmöglichkeiten, wie der Bindestrich (‐) oder (weicher Bindestrich). Ob keiner wurde als Wert angegeben keine Umhüllung in der Nähe von Bindestrichen.
Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse
.textContainer / *… * / -webkit-hyphens: auto; -ms-Bindestriche: auto; Bindestriche: auto;
Überlaufumwicklung
Das Überlaufwickel Die CSS-Eigenschaft steuert, ob a Browser bricht möglicherweise Wörter (oder bewahrte Räume, für die in naher Zukunft Unterstützung möglich sein könnte) bei Überlauf. Wenn der bruchwort Wert ist für angegeben Überlaufwickel, das Wort wird gebrochen werden im Fall Es werden keine anderen Soft-Wrap-Möglichkeiten gefunden in der Schlange.
Beachten Sie, dass Überlaufwickel ist auch bekannt als Zeilenumbruch (sie sind Aliase).
blühendesBlutshausbluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehaus
.textContainer / *… * / overflow-wrap: break-word;
Da zwischen den Buchstaben im HTML-Code kein Leerzeichen steht (d. H. Keine Umbruchmöglichkeiten), wurde der Text zunächst nicht umbrochen wurde als ein Wort erhalten.
Wenn jedoch die Erlaubnis erteilt wurde, den Text durch Brechen von Wörtern (d. H bruchwort Wert wurde gegeben Überlaufwickel), das Das Umwickeln erfolgte, indem die gesamte Schnur gebrochen wurde wo immer es nötig war.
