Sostituire alle interruzioni di riga uno spazio, utilizzando i CSS

di Giulio di Bari :: 20 marzo 2020

Condividi su

In questo pillola di web, vediamo come sostituire ai tag "break" <br>, cioè alle interruzioni di riga presenti in HTML, uno spazio.

Potrebbe essere utile, ad esempio, nei siti responsive, quando, nella versione per dispositivi mobile, volessimo accorpare il testo ed evitare troppi capo riga.

L'obiettivo che vogliamo raggiungere è sostituire il tag "<br>" con uno spazio vuoto.

Ad esempio, abbiamo una frase come questa

<p>bla<br />bla<br />bla<br />bla</p>

Ho trovato varie soluzioni sul web, ad esempio questa è spesso menzionata:

<style>
br{content:' ';}
br:after{content:' ';}
</style>

Tramite CSS:

1. br{content:' ';} : il tag br viene sostituito con uno spazio
2. br:after{content:' ';} : viene inserito un elemento (lo spazio vuoto) alla fine del tag br utilizzando lo pseudo-elemento "after"

Tuttavia, testandola, funziona su Chrome ma non su Firefox.

Questa invece è una soluzione compatibile con molti browser

<style>
br {
   content: " ";
   float:right; 
}
</style>

Per concludere l'argomento: se invece di uno spazio volessimo solo far "sparire" il tag break, possiamo utilizzare l'elemento display

br{display:none;}