Wie verhindern Sie, dass lange Wörter Ihr DIV-Layout beschädigen?

Verhindern, dass lange Wörter das Div-Layout zerstören

Problem:

DIV-Layouts stoßen häufig auf das Problem mit langen Wörtern, die über die Grenzen des div-Containers hinausragen und einen unprofessionellen Eindruck hinterlassen Aussehen.

Lösung:

Weicher Bindestrich (­):

Fügen Sie in geeigneten Abständen weiche Bindestriche ein, um Browser zu leiten wo man lange Wörter bricht. Browser zeigen normalerweise Wörter mit weichen Bindestrichen an, die als einzelne Wörter oder mit einem Bindestrich in der Wortmitte dargestellt werden.

Element:

Injizieren Sie das Element an potenziellen Bruchstellen, um anzugeben, wo das Wort ohne Bindestrich getrennt werden kann.

CSS-Trennstriche (automatisch):

Diese CSS-Eigenschaft (unterstützt von IE, Firefox , und Safari) trennt Wörter automatisch basierend auf einem Wörterbuch. Allerdings werden möglicherweise nicht alle langen Wörter effektiv gebrochen.

Retro-Whining-Lösung:

Anzeige anwenden: Tabellenzelle; zum Div-Container, um das dehnbare Verhalten von Tabellenzellen nachzuahmen.

Überlauf mit White-Space: pre-wrap:

Überlauf festlegen: versteckt; und Leerraum: vor dem Umbruch; auf dem div-Container, um zu erzwingen, dass Wörter innerhalb seiner Grenzen umgebrochen werden, während Leerzeichen erhalten bleiben.

Zusätzliche Überlegungen:

Browser und Suchmaschinen ignorieren weiche Bindestriche und Elemente beim Durchsuchen von Text. Chrome und Firefox ignorieren sie beim Kopieren von Text in die Zwischenablage.

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