在表格下连续标点符号换行

对于文字换行显示我们一般采取下面的做法。

在设置了width的前提下：

word-wrap:break-word;
word-break:break-all;
overflow:hidden;

这样我们就能将文本自动换行了。即使是中/英文的标点符号。

在表格中，我们为<th>标签设置了width，我们就可以限制对应列的宽度了，再为这一列的<td>设置上面的3条CSS属性，看起来表格就不会被过多的文字挤变形了。

但是在IE环境下如果我们在单元格中用很长的中/英文的标点符号呢？

我相信很多人都遭遇过这种测试用例。我的表格被一长串标点符号给顶的很宽。

原来，即使设置了换行的CSS属性，也不能保证表格中连续的标点符号会换行。其实只要一点小变化就能让标点符号“听话”：

第一步：在给<table>标签添加一个CSS属性：

table-layout:fixed;

这一条CSS属性可以启动表格布局。但也会带来一些问题：

没设置width的<th>标签对应的列宽度会有一些不受控制。

第二步：为每一个<th>设置width：

<table style="table-layout:fixed;">
    <thead>
    <tr>
        <th width="12"><input type="checkbox" value="option1">/th>
        <th width="80">ss</th>
        <th width="110">aaa</th>
        <th width="130">444</th>
        <th width="200">fff</th>
        <th width="110">yyy</th>
        <th width="70">888</th>
        <th width="120">jjj</th>
        <th width="80">mmm</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

尤其在表格列数较多，内容比较多时要特别注意。

第三步：为<td>添加换行属性：

就是将最开始说的3个CSS属性添加到<td>上。

word-wrap:break-word;
word-break:break-all;
overflow:hidden;

这样IE下你的表格就不会被连续的标点符号撑宽了。

虽说连续的标点符号，一般不会出现在网页中，但是如果你的网上允许用户自己输入内容呢？比如用于显示用户列表的表格。

再说了测试妹子好不容易测出来了，你忍心不改吗！

在表格下连续标点符号换行