Come evitare interruzioni di riga negli elementi di elenco tramite CSS

Question

Sto provando a inserire un collegamento chiamato Invia curriculum in un menu utilizzando un tag li. A causa dello spazio bianco tra le due parole si avvolge su due linee. Come evitare questo involucro con i CSS?

Answer 1

Usa white-space: nowrap;¹, o dare che puntano più spazio impostando li 's di larghezza per valori superiori.

Answer 2

Se si vuole raggiungere questo obiettivo in modo selettivo (per esempio: solo a quel particolare link), è possibile utilizzare uno spazio unificatore invece di uno spazio normale:

<li>submit&nbsp;resume</li> 

http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

edit: Capisco che questo è HTML, non CSS come richiesto dall'OP, ma alcuni potrebbero trovare utile ...

Answer 3

Si potrebbe aggiungere questo piccolo frammento di codice per aggiungere un bel "..." alla fine della riga se il contenuto è s alla grande per adattarsi su una riga:

li { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 4

display: inline-block; impedirà interruzioni di riga in voci di elenco

http://jsfiddle.net/Nash171/mwe4s0nc/46/

li{ 
    display: inline-block; 
}