Leerzeichen nowrap CSS für Kinder, aber nicht Eltern

Question

habe ich ein div mit mehreren Spannweiten im Innern. Die Spannweiten enthalten Text, der nicht aufgeteilt auf mehrere Zeilen sein kann, damit ich Satz Leerzeichen haben: nowrap. Dies macht die Verpackung stoppen korrekt innerhalb jedes Kind Spanne, sondern auch von Wickeln der Kinder die Eltern div stoppen, so dass alle Spannweiten auf einer einzigen Zeile, dass Strecken von der Seite sind.

Wie kann ich dieses Verhalten ändern, so dass die nowrap bezieht sich nur auf den Inhalt der einzelnen Spanne?

Answer 1

Option 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>

Option 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;
}

Das sollte den Trick tun. (Ihr div wird das id-Attribut auf sie benötigen.)

Answer 3

Stellen Sie die span Elemente display:inline-block haben.