在IE 6/7/8：HTML插入<p></p>（用jQuery）不符合设置的<p></p>

Question

所以我有这个标记宽度：

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

这种风格（冗余，我知道）：

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

和jQuery的该位插入简单的内容到段：

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

适用于Firefox。文字包装并保留在段落的设定宽度内。但不是在任何版本的IE中。在IE 7/8中，即使段落本身遵守设定的尺寸，文本也会从段落水平延伸。在IE 6中，文本不仅水平溢出，而且延伸段落。我试过使用.html而不是.text，但那不起作用。不理想。我提到不理想吗？有谁知道如何解决这个问题？谢谢。

Answer 1

这是a known bug in IE6：

IE6和更低的工具溢出：可见不正确。

正确的行为是，具有overflow：visible的元素变得和CSS订单一样高和宽，并且任何不符合要求的内容都会溢出，必要时重叠后面的内容。

注意，你在IE7和IE8看到的行为可能被认为是正确的（虽然并不十分友好的，至少如果文本没有换，当它可能套）。

要达到一致的行为，尝试Ryan McGeary's suggestion：添加overflow: hidden;到元素的样式，你想限制：

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

请注意，我还你原有的风格纠正一个错误的冒号 - 不知道，如果那是在你的实际代码中，或者只是在撰写你的问题时出现错字...

Answer 2

尝试增加overflow: hidden;段落元素的样式

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