Wie kann ich verhindern, dass lange Wörter aus meinen Divs herausbrechen?

Verhindern, dass lange Wörter Ihre Div unterbrechen

Beim Übergang vom Tabellenlayout zum Div-Layout bleibt ein anhaltendes Problem bestehen: das Unerwünschte Erweiterung übermäßig langer Wörter über die Grenzen einer div-Spalte hinaus. Dieses Vorkommnis kann die Ästhetik und Professionalität einer Website beeinträchtigen, was selbst auf prominenten Websites häufig zu beobachten ist, insbesondere auf solchen mit Sprachen mit von Natur aus langen Begriffen.

Lösung 1: Weicher Bindestrich

Das Einfügen eines weichen Bindestrichs (­) in lange Wörter ermöglicht es Browsern, den richtigen Umbruch zu bestimmen Punkte:

averyvery­longword

Dies ergibt folgende Darstellung:

averyverylongword

oder

averyvery-
longword

Lösung 2: Element

Alternativ kann das -Element kann verwendet werden, um potenzielle Unterbrechungspunkte anzuzeigen, ohne einen Bindestrich einzuführen:

averyvery<wbr>longword

Dadurch wird das Wort sauber an der Unterbrechungsstelle unterbrochen:

averyvery
longword

Lösung 3: CSS-Bindestriche (Von Chrome nicht unterstützt)

CSS-Bindestriche (aktiviert durch Bindestriche: auto;) automatisch Binden Sie Wörter anhand eines Wörterbuchs. Es kann zwar die Darstellung von Text im Blocksatz verbessern, ist aber keine zuverlässige Lösung, um zu verhindern, dass lange Wörter die Div-Grenzen überschreiten.

Rückwirkende Lösung: Anzeige: Tabellenzelle

Trotz seiner Ablehnung aus Layoutgründen ist die Anzeige display: table-cell; Die Eigenschaft kann weiterhin auf andere Elemente angewendet werden und emuliert das dehnbare Verhalten von Tabellenzellen, die sich dynamisch erweitern, um lange Wörter aufzunehmen.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass lange Wörter aus meinen Divs herausbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!