label linebreaking - sollte sich über gesamte div

Question

Ich habe eine CSS-Klasse namens bar. Mein Label (Span) im Beispiel ist "Sehr unzufrieden". Wenn die prozentuale Breite niedrig ist (zB 5%), dann bricht die Label-Zeile (Beispiel: Very [linebreak] Unbefriedigend) ab, anstatt das gesamte div über die bar18.png-Grafik hinaus zu überspannen.

CSS:

.bar { 
background: transparent url(bar18.png) repeat-x top left; 
float: left; 
clear: left; 
height: 30px; 
} 

.bar span{ 
font-size: 12px; 
font-weight: bold; 
color: #000; 
float: left; 
margin-left: 5px; 
margin-top: 7px; 
} 

HTML:

<div class="bar" style="width:8%;"> 
    <span>Very Dissatisfied</span> 
</div> 
<div class="p"> 
    <span>(1) 8%</span> 
</div> 

Answer 1

Bitte versuchen Sie dies:

span{margin-left:20%} 
.bar { 
background: transparent url(bar18.png) repeat-x top left; 
float: left; 
clear: left; 
height: 30px; 
} 

.bar span{ 
font-size: 12px; 
font-weight: bold; 
color: #000; 
float: left; 
margin-left: 5px; 
margin-top: 7px; 
white-space: nowrap; 
}