views:

17

answers:

2

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?

+2  A: 

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>
Brad
I think the OP wants to avoid having to add the class to every single element. See my answer.
Cfreak
or give the div an id, and just do id_of_div span{white-spave:nowrap;}
Prozaker
@Cfreak, I was already thinking that (hence, "Option 1"). I have added Option 2.
Brad
+1  A: 
div#id-of-parent span {
    whitespace: nowrap;
}

That should do the trick. (your div will need the id attribute on it.)

Cfreak
if you already have an id, there shouldn't be a need for the tag element.
Prozaker
@Prozaker - true but it's slightly faster for the browser
Cfreak