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. Th开发者_开发百科is 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?
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>
div#id-of-parent span {
whitespace: nowrap;
}
That should do the trick. (your div will need the id attribute on it.)
Set the span
elements to have display:inline-block
.
精彩评论