In IE 6/7/8: HTML inserted into <p></p> (with jQuery) not conforming to set width of the <p></p>.

Question

So I've got this markup:

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

with this style (redundant, I know):

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

and this bit of jQuery plugging simple content into the paragraph:

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

Works in Firefox. The text wraps and stays inside the set width of the paragraph. But not in any version of IE. In IE 7/8, the text continues horizontally out of the paragraph even though the paragraph itself adheres to the set dimensions. In IE 6, not only does the text spill out horizontally, but it stretches the paragraph with it. I've tried using .html instead of .text, but that didn't work. Not ideal. Did I mention not ideal? Does anyone know how to get around this? Thanks.

Answer 1

Try adding overflow: hidden; to the paragraph element's style

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

Answer 2

This is a known bug in IE6:

IE6 and lower implements overflow: visible incorrectly.

The correct behaviour is that the element with overflow: visible becomes as high and wide as the CSS orders, and that any content that doesn't fit spills out of the box, overlapping, if necessary, the content that follows.

Note that the behavior you're seeing in IE7 and IE8 could be considered correct (although not terribly friendly, at least if the text fails to wrap when it could wrap).

To achieve consistent behavior, try Ryan McGeary's suggestion: add overflow: hidden; to the style of the element you wish to constrain:

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

Note that I've also corrected an errant colon in your original style - no idea if that was in your actual code, or merely a typo when composing your question...