css nowrap spazi per i bambini, ma non genitore

Question

Ho un div con più campate all'interno. Le campate contengono testo che non può essere suddiviso su più righe così ho impostato spazi bianchi: nowrap. Questo fa fermare l'involucro all'interno di ogni campata bambino correttamente, ma anche fermare il div padre da avvolgere i bambini in modo che tutti siano campate su una singola linea che si estende al largo della pagina.

Come faccio a cambiare questo comportamento in modo che il nowrap vale solo per il contenuto di ogni campata?

Answer 1

L'opzione 1

<style>
   .nowrap { white-space: nowrap; }
</style>

<div>
   <span class="nowrap">span 1</span>
   <span class="nowrap">span 2</span>
   <span class="nowrap">span 3</span>
   <span class="nowrap">span 4</span>
   <span class="nowrap">span 5</span>
</div>

L'opzione 2

<style>
   .myDiv span{ white-space: nowrap; }
</style>

<div class="myDiv">
   <span>span 1</span>
   <span>span 2</span>
   <span>span 3</span>
   <span>span 4</span>
   <span>span 5</span>
</div>

Answer 2

div#id-of-parent span {
    whitespace: nowrap;
}

Questo dovrebbe fare il trucco. (Il vostro div avrà bisogno l'attributo id su di esso.)

Answer 3

Set elementi span di avere display:inline-block.