Wie kann ich verhindern, dass lange Wörter mein DIV-Layout beschädigen?

Verhindern, dass lange Wörter Ihr Div unterbrechen

Beim Wechsel von tabellenbasierten Layouts zu DIV-basierten Layouts bleibt ein häufiges Problem bestehen: das unansehnliche Überlaufen langer Wörter über den Rand von DIV-Spalten. Dieses Problem betrifft sogar große Websites und tritt besonders häufig in Sprachen wie Deutsch auf, wo selbst alltägliche Wörter lang sein können.

Lösung:

Weicher Bindestrich

Durch die Verwendung des weichen Bindestrichs (­) können Sie festlegen, wo Browser lange Pausen einlegen sollen Wörter:

averyvery­longword

Mit diesem Zeichen können Browser das Wort entweder als „averyverylongword“ oder „averyvery-

longword“ wiedergeben.

Ein regulärer Ausdruck kann strategisch hilfreich sein Einfügen von weichen Bindestrichen:

/([^\s-]{5})([^\s-]{5})/ → ­

Element

Alternativ können Sie das HTML5-Element Element, ein früherer IE-Ismus:

averyvery<wbr>longword

Dies bricht das Wort ohne Bindestrich, was zu „averyvery

Langwort“ führt.

CSS-Bindestriche

CSS-Bindestriche werden von den neuesten Versionen von IE, Firefox und Safari (nicht Chrome) unterstützt automatische Silbentrennung:

div.breaking {
  hyphens: auto;
}

Beachten Sie, dass diese Funktion auf einem Silbentrennungswörterbuch basiert und lange Wörter möglicherweise nicht immer konsistent umgebrochen werden.

Überlauf und Leerzeichen: Vorumbruch

Andere praktikable Lösungen umfassen die Kontrolle des Überlaufs und das Festlegen von Leerzeichen pre-wrap:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

Beide Ansätze verhindern, dass lange Wörter über die Grenze des DIV hinausragen.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass lange Wörter mein DIV-Layout beschädigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!