css nowrap spazi per i bambini, ma non genitore
-
08-10-2019 - |
Domanda
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?
Soluzione
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>
Altri suggerimenti
div#id-of-parent span {
whitespace: nowrap;
}
Questo dovrebbe fare il trucco. (Il vostro div avrà bisogno l'attributo id su di esso.)
Set elementi span
di avere display:inline-block
.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow