Prevenire l'interruzione di linea dell'elemento span

Ho un <span>elemento che voglio visualizzare senza alcuna interruzione di riga. Come lo posso fare?

Inserisci questo nel tuo CSS:

white-space:nowrap;

Maggiori informazioni qui: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

La white-spaceproprietà dichiara come viene gestito lo spazio bianco all'interno dell'elemento.

Valori

normal Questo valore indica agli agenti utenti di comprimere le sequenze di spazi bianchi e di interrompere le linee, se necessario, per riempire le caselle.

pre Questo valore impedisce agli interpreti di collassare sequenze di spazi bianchi. Le righe vengono interrotte solo alle nuove righe dell'origine o alle occorrenze di "\ A" nel contenuto generato.

nowrap Questo valore comprime lo spazio bianco come per "normale", ma elimina le interruzioni di riga all'interno del testo.

pre-wrap Questo valore impedisce agli interpreti di collassare sequenze di spazi bianchi. Le linee vengono spezzate nelle nuove righe dell'origine, nelle occorrenze di "\ A" nel contenuto generato e, se necessario, per riempire le caselle.

pre-line Questo valore indica agli interpreti di comprimere sequenze di spazi bianchi. Le linee vengono spezzate nelle nuove righe dell'origine, nelle occorrenze di "\ A" nel contenuto generato e, se necessario, per riempire le caselle.

inherit Accetta lo stesso valore specificato della proprietà per l'elemento padre dell'elemento.

Se devi solo impedire le interruzioni di riga sui caratteri dello spazio, puoi utilizzare  entità tra le parole:

No line break

invece di

<span style="white-space:nowrap">No line break</span>

white-space: nowrapè la soluzione corretta ma impedirà qualsiasi interruzione in una riga. Se vuoi solo impedire le interruzioni di linea tra due elementi, diventa un po 'più complicato:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Per evitare interruzioni tra gli span ma per consentire interruzioni tra "Alcuni" e "testo" è possibile:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

È abbastanza buono per Firefox. In Chrome è inoltre necessario sostituire lo spazio bianco tra le campate con un  . (La rimozione dello spazio bianco non funziona.)

Con Bootstrap 4 Class:

text-nowrap

Rif: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow