word-wrap en CSS

Question

J'essaie d'implémenter l'affichage suivant.

Mon html & CSS sont comme ça ...

<div class="label iepngfix">Nickname</div> 
<div class="text"> 
    <?php echo $nickname; ?> 
</div> 

.label { 
    float: left; 
    font-weight: bold; 
    padding: 0; 
} 

.text { 
    float: left; 
    margin: 0 0 0 5px; 
    word-wrap: break-word; 
} 

Dans IE6, 7 il semble bien, mais, dans IE8, Chrome et Firefox, il semble comme ça ...

Qu'est-ce qui me manque ici?

Cordialement

Answer 1

Votre CSS et HTML ne correspondent pas vraiment, mais je pense que, puisque vous ne donnez pas une largeur au second flotteur et il contient un long texte, le navigateur fait aussi large que possible ainsi il ne s'adaptera pas à côté du premier flotteur.

Ou quelque chose que vous ne nous montrez pas déclenche cela. Votre page déclenche-t-elle le mode standard (par exemple, a-t-elle un DOCTYPE)?

Answer 2

Si vous donnez à div.text une largeur définie, vous obtiendrez les résultats que vous recherchez. Exemple: Si la boîte contenant est 250px, div.label est naturellement 90px, alors div.text a besoin d'une largeur de 155px ou moins (cela prend en compte la marge de 5px).