css nowrap espacios en blanco para los niños, pero no de los padres

Question

Tengo un div con múltiples vanos interiores. Los tramos contienen texto que no se puede dividir en varias líneas, así que tengo conjunto blanco: nowrap. Esto hace detener la envoltura dentro de cada tramo niño correctamente, sino también detener el div padre de envolver a los niños para todos los tramos están en una sola línea que se extiende fuera de la página.

¿Cómo puedo cambiar este comportamiento para el nowrap sólo se aplica al contenido de cada tramo?

Answer 1

Opción 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>

Opción 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;
}

Esto debería hacer el truco. (Su div necesitará el atributo id en él.)

Answer 3

Establecer los elementos span tengan display:inline-block.