MICHELEPISANI.IT
  • Design
  • CSS
  • Articoli
  • Mandare a capo stringhe troppo lunghe che non contengono spazi
 

Mantenere le colonne di una tabella della larghezza desiderata

Mandare a capo stringhe troppo lunghe che non contengono spazi

Ottobre 27
07:472020

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).

Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie a te Walter per il feedback! :)

Walter Manzoni

Ciao Michele, stavo impazzendo nel cercare una soluzione per allineare al centro le immagini in un …

Michele Pisani

Ciao Enzo, grazie dei complimenti :) In questo momento GA4 è ancora acerbo sotto diversi punti di …

Enzo

Ciao Michele, innanzitutto complimenti per l'articolo. Volevo chiederti, questa soluzione è …