Proprietà CSS word-wrap

La proprietà word-wrap spezza le parole lunghe che altrimenti non potrebbero essere spezzate, in modo che si adattino al loro contenitore invece di traboccare oltre il bordo.

Normalmente un browser spezza il testo solo in corrispondenza delle "opportunità di a capo" — spazi, trattini e caratteri simili. Una singola stringa lunga priva di tali opportunità (una URL, un hash, un nome chimico, un ID molto lungo) non ha punti in cui andare a capo, quindi fuoriesce da una casella stretta e può compromettere il layout. word-wrap consente al browser di spezzare all'interno di una parola come ultima risorsa.

Quando usarla

Ricorri a word-wrap ogni volta che testo generato dall'utente o imprevedibile può essere più lungo del suo contenitore:

URL e percorsi di file visualizzati all'interno di una card o di una barra laterale a larghezza fissa.
Indirizzi email, nomi utente o token in una colonna stretta.
Stringhe lunghe e ininterrotte in tabelle, fumetti di chat o sezioni di commenti.
Qualsiasi layout responsive in cui non è possibile garantire dove va a capo il testo.

Ha importanza solo per le parole che non possono altrimenti andare a capo. Il testo normale già si divide agli spazi, quindi la proprietà non ha effetti visibili in quel caso.

word-wrap vs. overflow-wrap

word-wrap è il nome originale di Microsoft per ciò che la specifica CSS ha in seguito standardizzato come overflow-wrap. I due sono alias — fanno esattamente la stessa cosa e accettano gli stessi valori. I browser mappano internamente word-wrap su overflow-wrap.

Usa overflow-wrap nel nuovo codice per conformità agli standard; mantieni word-wrap se devi supportare browser molto vecchi, poiché alcuni motori legacy riconoscono solo il nome più datato.

Attenzione

Non confondere word-wrap con word-break. word-wrap/overflow-wrap spezza una parola solo quando andrebbe altrimenti in overflow — le parole normali rimangono intatte. word-break: break-all è più aggressivo: spezza le parole in qualsiasi carattere, anche quando entrerebbero nel contenitore. Scegli word-wrap quando vuoi un'interruzione pulita che si attivi solo in caso di emergenza.

word-wrap è una delle proprietà CSS3 e ha effetto solo quando la proprietà white-space consente l'a capo (ad esempio, non ha effetto con white-space: nowrap).

Valore iniziale	normal
Si applica a	Tutti gli elementi.
Ereditabile	Sì.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.wordWrap = "break-word";

Sintassi

Valori CSS word-wrap

word-wrap: normal | break-word | initial | inherit;

Esempio della proprietà word-wrap con il valore "normal":

Esempio di codice CSS word-wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Con normal, le lunghe stringhe simply... e industry... non hanno punti di interruzione, quindi fuoriescono dalla casella da 120px.

Esempio della proprietà word-wrap con il valore "break-word":

Esempio CSS word-wrap break-word

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Provalo tu stesso »

Ora break-word consente al browser di dividere quelle lunghe stringhe a metà parola al bordo della casella, mantenendo il contenuto ordinatamente all'interno del contenitore da 120px.

Valori

Valore	Descrizione
normal	Spezza le parole solo nei punti di interruzione consentiti. Questo è il valore predefinito.
break-word	Permette di spezzare parole non spezzabili se superano la larghezza del contenitore.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

overflow-wrap — il nome standardizzato per lo stesso comportamento; preferirlo nel nuovo codice.
word-break — interruzione più aggressiva che può dividere le parole anche quando entrerebbero nel contenitore.
white-space — controlla se il testo va a capo; word-wrap si applica solo quando l'a capo è consentito.
word-spacing — regola lo spazio tra le parole (non correlato all'interruzione, ma facile da confondere per il nome).

Esercizio

Pratica

Quale affermazione è corretta riguardo alla proprietà CSS word-wrap?

È una proprietà animabile.Ha effetto solo quando la proprietà white-space consente l'a capo.Il valore break-words spezza le parole nei punti di interruzione consentiti.