Det finns tillfällen då en riktigt lång textsträng kan rinna över behållaren i en layout.
Till exempel:
Här är scoop:
overflow-wrap: break-word;ser till att den långa strängen kommer att lindas och inte byta ut ur behållaren. Du kan lika gärna använda detword-wrapockså, för som specifikationen säger är de bokstavligen bara alternativa namn för varandra. Vissa webbläsare stöder den ena och inte den andra. Firefox (testad v43) stöder baraword-wrap. Blink (testad Chrome v45) tar antingen en.- När de
overflow-wrapanvänds i sig kommer ord att bryta ungefär var som helst de behöver. Om det finns en "acceptabel paus" karaktär (som till exempel en bokstavlig streck), kommer den att bryta där, annars gör den bara vad den behöver göra. - Du kan lika gärna använda det
hyphensockså, för då försöker det smakfullt att lägga till ett bindestreck där det går sönder om webbläsaren stöder det (Blink gör det inte i skrivande stund, Firefox gör det). word-break: break-all;är att säga till webbläsaren att det är OK att bryta ordet varhelst det behöver. Även om det gör det ändå, så jag är inte säker i vilka fall det är 100% nödvändigt.
Om du vill vara mer manuell med bindestreck kan du föreslå dem i din markering. Se mer på MDN-sidan.
Webbläsarstöd
För word-break:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
För hypens:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
För overflow-wrap:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
För text-overflow:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Förhindra överflöd med ellips
Ett annat tillvägagångssätt att överväga är att trunka av texten helt och lägga till ellipser där textsträngen träffar behållaren:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Den här fina saken med att använda text-overflowär att den stöds universellt.
Exempel
Se Pen Hyphenate Long Words av CSS-Tricks (@ css-tricks) på CodePen.
Se Pen Ellipses av CSS-Tricks (@ css-tricks) på CodePen.
Se Pen Figuring Out Line Wrapping av Chris Coyier (@chriscoyier) på CodePen.
Fler resurser
- Michael Scharnagl: Hantera långa ord i CSS
- Kenneth Auchenberg: Ordinpackning / bindestreck med CSS
- MDN: ordförpackning, ordbrytning, bindestreck
- Spec: CSS textnivå 3
För SCSS-lutande
Dessa tenderar att vara den typ av saker du strö i kod där det behövs, så de ger bra @mixins:
@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; )