Ci sono momenti in cui una stringa di testo molto lunga può traboccare dal contenitore di un layout.
Per esempio:
Ecco lo scoop:
overflow-wrap: break-word;si assicura che la lunga stringa si avvolga e non fuoriesca dal contenitore. Potresti anche usarloword-wrapperché, come dice la specifica, sono letteralmente solo nomi alternativi l'uno per l'altro. Alcuni browser supportano uno e non l'altro. Firefox (testato v43) supporta soloword-wrap. Blink (Chrome v45 testato) prenderà uno dei due.- Con l'
overflow-wrapuso da solo, le parole si romperanno un po 'ovunque ne abbiano bisogno. Se è presente un carattere di "interruzione accettabile" (come un trattino letterale, ad esempio), si interromperà lì, altrimenti fa solo quello che deve fare. - Potresti anche usarlo
hyphens, perché allora proverà ad aggiungere con gusto un trattino dove si interrompe se il browser lo supporta (Blink non lo fa al momento della scrittura, Firefox lo fa). word-break: break-all;è dire al browser che va bene spaccare la parola ovunque sia necessario. Anche se in un certo senso lo fa comunque, quindi non sono sicuro in quali casi sia necessario al 100%.
Se vuoi essere più manuale con i trattini, puoi suggerirli nel tuo markup. Vedi di più sulla pagina MDN.
Supporto del browser
Per word-break:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Per hypens:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Per overflow-wrap:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Per text-overflow:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Prevenzione del trabocco con l'ellissi
Un altro approccio da considerare è il troncamento del testo e l'aggiunta di puntini di sospensione nel punto in cui la stringa di testo colpisce il contenitore:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )La cosa bella dell'utilizzo text-overflowè che è supportato universalmente.
Esempi
Vedere le parole lunghe con trattino a penna di CSS-Tricks (@ css-tricks) su CodePen.
Vedi Pen Ellipses di CSS-Tricks (@ css-tricks) su CodePen.
Guarda la penna che calcola l'involucro della linea di Chris Coyier (@chriscoyier) su CodePen.
Più risorse
- Michael Scharnagl: Trattare con parole lunghe in CSS
- Kenneth Auchenberg: A capo automatico / sillabazione utilizzando CSS
- MDN: a capo automatico, interruzione di parola, trattini
- Spec: CSS Text Level 3
Per le persone con inclinazione SCSS
Questi tendono ad essere il tipo di cose che spargi nel codice dove necessario, quindi creano dei bei @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; )