首页 > 代码库 > 在表格下连续标点符号换行
在表格下连续标点符号换行
对于文字换行显示我们一般采取下面的做法。
在设置了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下你的表格就不会被连续的标点符号撑宽了。
虽说连续的标点符号，一般不会出现在网页中，但是如果你的网上允许用户自己输入内容呢？比如用于显示用户列表的表格。
再说了测试妹子好不容易测出来了，你忍心不改吗！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。