Überlaufverpackung - CSS-Tricks

Anonim

Mit der overflow-wrapEigenschaft in CSS können Sie festlegen, dass der Browser eine Textzeile innerhalb des Zielelements an einer ansonsten unzerbrechlichen Stelle in mehrere Zeilen aufteilen kann. Dies hilft, eine ungewöhnlich lange Textfolge zu vermeiden, die aufgrund von Überlauf zu Layoutproblemen führt.

.example ( overflow-wrap: break-word; )

Werte

  • normal: der Standard. Der Browser unterbricht Zeilen gemäß den normalen Zeilenumbruchregeln. Wörter oder ungebrochene Zeichenfolgen werden nicht unterbrochen, selbst wenn sie den Container überlaufen.
  • break-word: Wörter oder Zeichenfolgen, die zu groß sind, um in ihren Container zu passen, werden an einer beliebigen Stelle unterbrochen, um einen Zeilenumbruch zu erzwingen. Ein Bindestrich wird nicht eingefügt, auch wenn die hyphensEigenschaft verwendet wird.
  • inherit: Das Zielelement muss den Wert der overflow-wrapEigenschaft erben, die auf seinem unmittelbaren übergeordneten Element definiert ist.

Die folgende Demo verfügt über eine Umschalttaste, mit der Sie zwischen normalund wechseln können break-word.

Sehen Sie sich die Pen Overflow-Wrap / Word-Wrap-Demo von Louis Lazaris (@impressivewebs) auf CodePen an.

Um das overflow-wrapzu lösende Problem zu demonstrieren , verwendet die Demo ein ungewöhnlich langes Wort in einem relativ kleinen Container. Wenn Sie einschalten break-word, wird das Wort unterbrochen, um den geringen verfügbaren Speicherplatz aufzunehmen, als wäre das Wort mehrere Wörter.

Eine Zeichenfolge von nicht unterbrechenden Leerzeichen ( ) wird auf die gleiche Weise behandelt und auch an einer geeigneten Stelle unterbrochen .

overflow-wrapist nützlich, wenn es auf Elemente angewendet wird, die nicht moderierten benutzergenerierten Inhalt enthalten (z. B. Kommentarbereiche). Dies kann verhindern, dass lange URLs und andere ununterbrochene Textzeichenfolgen (z. B. Vandalismus) das Layout einer Webseite beschädigen.

Ähnlichkeiten mit der word-breakImmobilie

overflow-wrapund word-breakverhalten sich sehr ähnlich und können verwendet werden, um ähnliche Probleme zu lösen. Eine grundlegende Zusammenfassung des Unterschieds, wie in der CSS-Spezifikation erläutert, lautet:

  • overflow-wrap wird im Allgemeinen verwendet, um Probleme mit langen Zeichenfolgen zu vermeiden, die aufgrund von Textfluss außerhalb eines Containers zu fehlerhaften Layouts führen.
  • word-break Gibt Soft-Wrap-Möglichkeiten zwischen Buchstaben an, die üblicherweise mit Sprachen wie Chinesisch, Japanisch und Koreanisch (CJK) assoziiert werden.

Nach der Beschreibung von Beispielen für word-breakdie Verwendung in CJK-Inhalten heißt es in der Spezifikation: „Weitere Unterbrechungsmöglichkeiten nur bei Überlauf aktivieren, siehe overflow-wrap“.

Daraus können wir schließen, dass dies word-breakam besten für nicht-englische Inhalte verwendet wird, für die bestimmte Regeln für das Brechen von Wörtern erforderlich sind, und die möglicherweise mit englischen Inhalten durchsetzt sind, während overflow-wrapsie verwendet werden sollten, um fehlerhafte Layouts aufgrund langer Zeichenfolgen zu vermeiden, unabhängig von der verwendeten Sprache .

Das historische word-wrapEigentum

overflow-wrapist der Standardname für seinen Vorgänger, die word-wrapEigenschaft. word-wrapwar ursprünglich eine proprietäre Internet Explorer-Funktion, die schließlich in allen Browsern unterstützt wurde, obwohl sie kein Standard war.

word-wrapakzeptiert dieselben Werte wie overflow-wrapund verhält sich genauso. Gemäß der Spezifikation müssen Browser „ word-wrapals alternativen Namen für die overflow-wrapEigenschaft behandeln, als wäre es eine Abkürzung von overflow-wrap“. Außerdem müssen alle Benutzeragenten word-wrapaus früheren Gründen auf unbestimmte Zeit unterstützen .

Beide overflow-wrapund word-wrapbestehen die CSS-Validierung, solange der Validator auf CSS3 oder höher getestet ist (derzeit die Standardeinstellung).

verbunden

  • Wortumbruch
  • Bindestriche
  • Leerraum
  • Umgang mit langen Wörtern und URLs

Mehr Informationen

  • Zeilenumbruch: Eine CSS3-Eigenschaft, die in jedem Browser funktioniert
  • Überlaufverpackung auf W3C
  • Diskussion über Stapelüberlauf auf word-breakvs.overflow-wrap

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
23 49 11 18 6.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Die oben angegebene "teilweise" Unterstützung ist darauf zurückzuführen, dass ältere Browser dies unterstützen, word-wrapjedoch nicht overflow-wrap. Die Verwendung von beiden kann die Abwärtskompatibilität sicherstellen.

Die Entwurfsversion der W3C-Spezifikation des Herausgebers enthält einen neuen Wert namens break-spaces, der sich mit Sequenzen von "erhaltenen" Leerzeichen befasst. Es ist keine Browserunterstützung für diese Funktion bekannt und sie ist nicht in der Arbeitsentwurfsversion der Spezifikation enthalten.