Dans IE 6/7/8: HTML inséré dans <p></p> (avec jQuery) non conforme à définir la largeur de la <p></p>

Question

J'ai ce balisage:

<div id="text-container"> 
    <p></p> 
</div> 

avec ce style (redondant, Je sais):

#text-container {display:block: width:220px; height:280px;} 
#text-container p {display:block; width:220px; height:60px;} 

et ce bit de jQuery brancher contenu simple dans le paragraphe:

$("#text-container p").text(data); 

Fonctionne dans Firefox. Le texte enveloppe et reste à l'intérieur de la largeur définie du paragraphe. Mais pas dans une version de IE. Dans IE 7/8, le texte continue horizontalement hors du paragraphe même si le paragraphe lui-même respecte les dimensions définies. Dans IE 6, non seulement le texte déborde horizontalement, mais il étire le paragraphe avec. J'ai essayé d'utiliser .html au lieu de .text, mais cela n'a pas fonctionné. Pas idéal. Ai-je mentionné pas idéal? Est-ce que quelqu'un sait comment contourner cela? Merci.

Answer 1

Ceci est a known bug in IE6:

IE6 et outils inférieurs overflow: visible de manière incorrecte. Le comportement correct est que l'élément avec débordement: visible devient aussi haut et large que les ordres CSS, et que tout contenu qui ne rentre pas dans la boîte, chevauche, si nécessaire, le contenu qui suit.

Notez que le comportement que vous voyez dans IE7 et IE8 pourrait être considérée comme correcte (bien que pas très sympathique, au moins si le texte ne parvient pas à envelopper quand il pourrait wrap).

Pour obtenir un comportement cohérent, essayez Ryan McGeary's suggestion: ajouter overflow: hidden; au style de l'élément que vous souhaitez limiter:

 
#text-container {display:block; width:220px; height:280px; overflow:hidden;} 
#text-container p {display:block; width:220px; height:60px; overflow:hidden;} 

Notez que j'ai aussi un colon corrigé errante dans votre style original - aucune idée si c'était dans votre code actuel, ou simplement une faute de frappe lors de la composition de votre question ...

Answer 2

Essayez d'ajouter overflow: hidden; au style de l'élément de paragraphe

#text-container p {display:block; width:220px; height:60px; overflow:hidden;}