Mandare a capo stringhe troppo lunghe che non contengono spazi

Le stringhe di testo, contenute nelle celle di una tabella HTML o contenitori, possono generare anomalie nella dimensione delle colonne qualora il testo non contenga spazi di separazione tra le parole. Casi di questo tipo possono verificarsi quando viene data all'utente la possibilità di inserire dati in un form che vengono successivamente visualizzati in front-end al submit, basti pensare ai commenti inseriti in modo strano per errore o ad opera di bot e spammer. Un esempio nel codice seguente:

<table>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </td>
    </tr>
  </tbody>
</table>

Per ovviare a questo inconveniente ci viene incontro una dichiarazione CSS: word-break.

Basterà semplicemente applicarla all'elemento HTML che intendiamo salvaguardare da questo comportamento non desiderato e, associato ad una larghezza definita (width), si comporterà in modo tale da mandare il testo andare a capo rispettando le dimensioni indicate. L'applicazione della dichiarazione è mostrata nel codice seguente:

<table>
  <tbody>
    <tr>
      <td>
        <label>Note:</label>
      </td>
      <td  style="word-break:break-all; width: 30%;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </td>
    </tr>
  </tbody>
</table>

Da notare che, nell'esempio appena illustrato il valore di word-break è impostato a break-all.
Questo comporta che qualsiasi testo presente nell'elemento raggiunga la dimensione associata, intendendo un contenuto testuale vero e proprio (non una stringa senza spazi), verrà troncato andando a capo senza badare ad alcuna regola grammaticale.

In questi casi ci aiuta il valore break-word.
Utilizzando quest'ultimo anziché il precedente il testo andrà a capo senza spezzare le parole (si perde l'effetto di formattazione giustificato tuttavia garantisce una forma leggibile e pulita del contenuto).