Es gibt Zeiten, in denen eine wirklich lange Textfolge den Container eines Layouts überlaufen kann.
Zum Beispiel:
Hier ist die Kugel:
overflow-wrap: break-word;stellt sicher, dass die lange Schnur umwickelt und nicht aus dem Behälter herausspringt. Sie können es auch verwenden,word-wrapda es sich, wie in der Spezifikation angegeben, buchstäblich nur um alternative Namen handelt. Einige Browser unterstützen den einen und nicht den anderen. Firefox (getestet v43) unterstützt nurword-wrap. Blink (getestet Chrome v45) benötigt beide.- Mit
overflow-wrapselbst Gebrauch alle durch, werden Worte irgendwie überall brechen müssen sie. Wenn es ein "akzeptables Unterbrechungszeichen" gibt (wie zum Beispiel ein wörtlicher Bindestrich), wird es dort unterbrochen, andernfalls tut es einfach das, was es tun muss. - Sie können es auch verwenden
hyphens, da dann versucht wird, einen Bindestrich geschmackvoll einzufügen, wenn er vom Browser unterstützt wird (Blink zum Zeitpunkt des Schreibens nicht, Firefox nicht). word-break: break-all;ist, dem Browser mitzuteilen, dass es in Ordnung ist, das Wort zu brechen, wo immer es benötigt wird. Auch wenn es das sowieso irgendwie macht, bin ich mir nicht sicher, in welchen Fällen es zu 100% notwendig ist.
Wenn Sie mit Bindestrichen mehr manuell arbeiten möchten, können Sie diese in Ihrem Markup vorschlagen. Weitere Informationen finden Sie auf der MDN-Seite.
Browser-Unterstützung
Für word-break:
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 |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Für hypens:
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 |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Für overflow-wrap:
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 |
Für text-overflow:
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 |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Überlauf mit Ellipse verhindern
Ein weiterer zu berücksichtigender Ansatz besteht darin, den Text vollständig abzuschneiden und Ellipsen hinzuzufügen, wenn die Textzeichenfolge auf den Container trifft:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Das Schöne an der Verwendung text-overflowist, dass sie universell unterstützt wird.
Beispiele
Siehe die Pen Hyphenate Long Words von CSS-Tricks (@ css-Tricks) auf CodePen.
Siehe die Stiftellipsen nach CSS-Tricks (@ css-Tricks) auf CodePen.
Siehe den Pen Figuring Out Line Wrapping von Chris Coyier (@chriscoyier) auf CodePen.
Mehr Ressourcen
- Michael Scharnagl: Umgang mit langen Wörtern in CSS
- Kenneth Auchenberg: Zeilenumbruch / Silbentrennung mit CSS
- MDN: Zeilenumbruch, Wortumbruch, Bindestriche
- Spezifikation: CSS-Textebene 3
Für den SCSS-geneigten
Dies sind in der Regel die Dinge, die Sie bei Bedarf in Code einstreuen, sodass sie für nette @mixins sorgen:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )