td下标签做word-wrap自动分行不兼容火狐
2018-06-06 本文已影响19人
笨手笨脚越
遇到一个浏览器兼容性的问题，对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浏览器显示：
Chrome浏览器显示.png
-
Firefox浏览器显示：
Firefox浏览器显示.png
在火狐上，不仅是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>
火狐效果如下：
image.png
OK！
