des espaces pour les enfants nowrap css mais pas parent

Question

J'ai un div avec plusieurs portées à l'intérieur. Les portées contiennent du texte qui ne peut pas être répartie sur plusieurs lignes, donc j'ai ensemble des espaces: nowrap. Cela ne s'arrête l'emballage à l'intérieur de chaque travée de l'enfant correctement, mais aussi arrêter la div mère d'envelopper les enfants afin que tous les portées sont sur une seule ligne qui se étend hors de la page.

Comment puis-je modifier ce comportement afin que le nowrap applique uniquement au contenu de chaque travée?

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

Cela devrait faire l'affaire. (Votre div aura besoin de l'attribut id sur elle.)

Answer 3

Définir les éléments span d'avoir display:inline-block.