Overflow: Come andare a capo con un Url lungo in CSS

Può capitare una volta che si popola di contenuti un blog e quando si fa il testing nelle varie risoluzioni di scontrarsi con un piccolo bug di overflow (leggi cosa significa su w3schools) soprattutto nella versione mobile. Questo bug riguarda il caso in cui una parola o il più delle volte un Url troppo lungo allunga la larghezza del sito e fa comparire lo scroll orizzontale nella pagina.

overflow scroll css url

Per ovviare questo problema si può usare una semplice regola CSS che tronca le parole a capo con una barra eliminando quindi l’overflow:

p{
	overflow-wrap: break-word;
  	word-break: break-word;
	hyphens: auto;
}

Praticamente con queste regole viene detto al browser di non andare fuori dal contenuto e che è ok tagliare le parole.

La regola può essere applicata a qualsiasi elemento.

Get a try.

Posted in CSS.

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.