venerdì 24 novembre 2017

CSS HTML: Spezzare parole troppo lunghe per andare a capo

Tags

La desiderata del giorno è molto semplice, ovvero: in una pagina html, dentro una tabella o un div, spezzare le parole troppo lunghe in modo tale da mandare a capo il testo nella pagina, evitando così lo spiacevole effetto di sforamento della pagina.

Ovviamente sto parlando di html, e più precisamente di fogli di stile css.
A me è capitato di recente, avevo fatto una bella tabella con dentro dei dati, testo ed immagini, e quando sono andato a sbirciare come si vedeva in versione mobile da cellulare... orrore, la tabella usciva dalla pagina a causa del suo contenuto.
Ed ecco che cercando su google, ho trovato l'attributo css che fa al caso mio, ovvero quello che consente di troncare una parola quando questa risulta troppo lunga per poter esser contenuta nel suo contenitore.

Ma bando alle ciance, vediamo subito come fare.


Come spezzare le parole troppo lunghe per andare a capo in html con i css


L'istruzione css da utilizzare per spezzare in due una parola (o in più parti ovviamente), creando una sorta di giustificato, è la seguente:

word-break: break-all;

Tutto qui, con una semplice riga di css, se una parola contenuta in una frase risulterà eccessivamente lunga per il suo contenuto, al posto di sformare la pagina, andrà acapo troncata in due.

Ovviamente questo non basta per fare tabelle html responsive, bisogna un po' giocare poi con gli spazi e le dimensioni, ed altri attributi, ma diciamo che è comunque un buon inizio.

Fine post flash sui css, alla prox!

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon