遇到一个浏览器兼容性的问题,对td下的label标签做word-wrap自动分行没有用。
<style type="text/css">
table{
width: 200px;
}
label{
word-wrap:break-word;
word-break:break-all;
}
</style>
<body>
<table>
<tr>
<td>111111</td>
<td><label>kdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</label></td>
</tr>
<tr>
<td>22222</td>
<td><label>kdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</label></td>
</tr>
</table>
</body>
-
Chrome浏览器显示:
-
Firefox浏览器显示:
在火狐上,不仅是label,只要是td下的标签,设置word-wrap、word-break自动分行都没有效果。
解决方案:不对label做分行,直接对label的父元素td做:
<style type="text/css">
table{
width: 200px;
}
td:last-child{
word-wrap:break-word;
word-break:break-all;
}
</style>
<body>
<table>
<tr>
<td>111111</td>
<td><label>kdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</label></td>
</tr>
</table>
</body>
火狐效果如下:
OK!