Ciao a tutti e benvenuti in questa piccola guida dove vi andrò a mostrato come andare a capo riga quando il testo di una pagina HTML contenuto in un tag va oltre il bordo della pagina. Quando il testo di una pagina è troppo lungo (senza spazi) questo può andare oltre i confini della pagina HTML causando la comparsa di una barra di scorrimento orizzontale. Questo può essere molto dannoso in termini di SEO dato che quando la pagina verrà indicizzata da google o altri motori di ricerca questa verra classificata come pagina non adatta a dispositivi mobili. Vediamo quindi come andare a capo riga quando un testo troppo lungo è presente nella nostra pagina HTML.
Come andare a capo quando il testo esce fuori dal bordo con CSS
Come comportamento di default, il testo va automaticamente a capo quando vi sono degli spazi presenti tra le parole. Ma se non vi sono alcuni spazi, il browser non sa' come spezzare la parola per andare a capo e quindi viene visualizzata interamente su una sola riga. Questo accade per esempio quando si mostrano link (URL) nella pagina.
Per andare a capo in modo dinamico quando la dimensione del browser viene ridotta, possiamo usare la proprietà CSS: overflow-wrap: break-word;
Vediamo in basso un esempio:
<!DOCTYPE html> <html> <head> <title>Esempio andare a capo con overflow</title> <style>#genitore{ overflow-wrap: break-word; }</style> </head> <body><div id="genitore"> <p id="testo-lungo">UnaParolaMoltoLungaCheVogliamoMandareACapo</p> </div></body> </html>
Se visualizziamo il codice HTML mostrato in alto in un browser vedremo in output il seguente (senza alcune regole CSS):
UnaParolaMoltoLungaCheVogliamoMandareACapo
Per altre opzioni sull'uso della regola CSS: overflow-wrap potete consultare la documentazione.
Ci siamo! Abbiamo visto come andare a capo quando il testo è troppo lungo all'interno di una pagina HTML con CSS.
