[SOLVED] whitespace nowrap css for children but not parent

whitespace nowrap css for children but not parent

I have a div with multiple spans inside. The spans contain text that cannot be split over multiple lines so I have set whitespace: nowrap. This does stop the wrapping within each child span correctly but also stop the parent div from wrapping the children so all spans are on a single line that stretches off the page.

How do I change this behaviour so the nowrap only applies to the contents of each span?

Solution

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>