Pubblicato il

css

html

overflow


come andare a capo quando un testo troppo lungo fuori dal bordo con HTML e CSS

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.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)