在段的词包裹断裂词在桌里

Question

我有一个这样的简单表：

<table>
<tr>
   <td id="col1"><p>test1</p></td>
   <td id="col2">
        <p>testtestetst@test.com</p>
        <p>abcd@efg.com</p>
        <p>testtesttesttest@gmail.comasdfdsasadfsadfsadfasdf</p>
   </td>
   <td id="col3"><p>10 April 2010 4:33 PM</p></td>
</tr>
</table>

还有一些CSS：

table{
  width: 300px;
}

#col1{
    width: 100px;
}

#col2{
    width: 100px;
    max-width: 100px;
}

#col3{
    width: 100px;
}

p{
    word-wrap: break-word;
}

以上的小提琴：http://jsfiddle.net/ypMQX/

我已经修复了表格和每列的宽度。我还为所有段落元素设置了word-wrap到break-word。然后我将最大宽度设置为#col2。为什么第2列允许扩展而不包装，即使我已将其设置为break-word？

我希望我的所有列都有固定的宽度，然后将内容包含在内。如何实现这一目标？

Answer 1

只需将100px宽度添加到＆lt; p＆gt;标签。您不需要向表列添加100px宽度。
这是必需的css：

table{
  width: 300px;
}


p{
 word-wrap: break-word;
 width: 100px;
}

小提琴：http://jsfiddle.net/QNwtj/4/

Answer 2

您正在测试哪种浏览器？我在使用Firefox，这就是我所看到的

无论如何，这会打破IE，您可以为段落添加另一个选择器以及#col2，如：

#col2, #col2 p {
  width: 100px;
  max-width: 100px;
}