css - 表格中段落中的自动换行断词

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 宽度添加到 <p> 标签。您不需要为表格列添加 100px 宽度。
这是所需的CSS：

table{
  width: 300px;
}


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

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

Answer 2

你在什么浏览器上测试？我在火狐上，这就是我所看到的

无论如何，这会在 IE 上中断，您可以为段落添加另一个选择器以及您的#col2喜欢：

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