Wie kann das Seitenanzeigeproblem langer englischer Wörter in CSS gelöst werden?

Kurz gesagt

Im Seitenlayout überschwemmen lange englische Wörter oft den Absatzcontainer. Das folgende Vergleichsdemonstrationsprogramm ist jetzt zusammengestellt:

Demonstrationsprogramm

42du.cn-online-Demoprogramm

Teil des HTML-Codes

<div class="block">    <h4>word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .break-all {    word-break: break-all;}.break-word {    word-wrap: break-word;}.hyphens {    word-wrap: break-word;    -webkit-hyphens: auto;    -ms-hyphens: auto;    hyphens: auto;}

Probleme

Beim Setzen englischer Absätze stoßen wir häufig auf lange englische Wörter. Wenn ein Wort an die Containergrenze gesetzt wird, wird das Wort im Allgemeinen automatisch zur Anzeige in die nächste Zeile verschoben. Und wenn die Länge eines einzelnen Wortes größer als die Breite des Containers ist, überschreitet es die Containergrenze. Sehen Sie sich den ersten Teil der Demonstration im Artikel „Außergewöhnlicherweise überschreitet die Länge der Seite die Containergrenzen“ an.

Wenn es um Wortzeilenumbrüche in CSS geht, fallen einem natürlich Wortumbrüche und Zeilenumbrüche ein. Die konkreten Unterschiede werden im Vergleich zwischen dem zweiten und dritten Teil der Demonstration deutlich.

word-break: break-all;

Die obige Aussage, wie im zweiten Teil der Demo gezeigt. Wenn das Wortformat die Containergrenze erreicht, wird das Wort in zwei Teile geteilt und der letzte Teil zur Anzeige in die nächste Zeile verschoben. Die rechte Seite des Absatzes ist auf diese Weise übersichtlich gestaltet, und der Effekt gefällt mir. Allerdings führt die Funktion „Alles umbrechen“ dazu, dass viele Wörter am Ende der Zeile umgebrochen werden, was sich negativ auf das Leseerlebnis auswirkt.

word-wrap: break-word;

Die obige Aussage, wie im dritten Teil der Demo gezeigt. Wenn das Wortformat die Containergrenze erreicht, wird das Wort in die nächste Zeile verschoben, um es zuerst anzuzeigen. Wenn die Wortlänge die Zeilenbreite überschreitet, werden die Wörter unterbrochen. Das heißt, der Inline-Trennung wird Priorität eingeräumt, und wenn die Inline-Trennung nicht funktioniert, wird das Wort „Disconnection“ verwendet. Auf diese Weise ist die rechte Seite des Satzabsatzes nicht sauber genug und es gibt Leerzeichen, es kommt jedoch nicht dazu, dass viele Wörter unterbrochen werden oder überlaufen.

Bindestriche: auto;

Die obige Aussage, wie im vierten Teil der Demo gezeigt. Wenn Sie noch einen Schritt weiter gehen und den gebrochenen Wörtern einen Bindestrich (-) hinzufügen möchten, können Sie hyphens:auto verwenden. Allerdings ist die Kompatibilität dieser Aussage derzeit sehr dürftig.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Die 20 am häufigsten verwendeten regulären Ausdrücke in JavaScript

So lösen Sie das domänenübergreifende Problem von Ajax

Das obige ist der detaillierte Inhalt vonWie kann das Seitenanzeigeproblem langer englischer Wörter in CSS gelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!