Question

在IE8中它的工作正常。在Firefox中如果我从td文本中删除nowrap属性正在被正确包装但没有删除nowrap文本没有被包装。

有没有办法在firefox中通过css覆盖nowrap属性。

<div style="width:100%;border:1px solid #eaeaea">
<table style="width:100%;word-wrap:break-word;table-layout:fixed" border="1" >
    <tr>
        <td>
            thisssssssssssssssssssssssssss
        </td>
        <td nowrap="" style="word-wrap:break-word;">
            22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss
        </td>
    </tr>
</table>
</div>

Answer 1

table {
  table-layout:fixed;
  width:100%;
  word-wrap:break-word;
}

td {
 white-space: normal;
}

white-space规则覆盖了no-wrap属性（你的问题），自动换行规则打破了牢不可破的字符串

Answer 2

快速思考......在你想要覆盖FF之前。了解Chrome / Safari等正在做什么，并考虑使用IE 8条件覆盖CSS（多数规则方法）。

<!--[if IF 8]>...

Answer 3

我不确定我是否完全了解你的情况，但这样的事情可能会好一点：

<style type="text/css">
    #myDiv { width:100%; border:1px solid #eaeaea; }

    #myTable { width:100%; word-wrap:break-word; table-layout:fixed }
    #myTable th, #myTable td { border:1px solid #000000; }

    td.breakWord { word-wrap:break-word; white-space:nowrap; }
</style>


<!--[if IE]>
<style type="text/css">
    td.breakWord { white-space:normal; }
</style>
<![endif]-->


<div id="myDiv">
<table id="myTable" >
    <tr>
        <td>
            thisssssssssssssssssssssssssss
        </td>
        <td class="breakWord">
            2222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss22222222thisssssssssssssssssssssssssss
        </td>
    </tr>
</table>
</div>

您可以在http://www.quirksmode.org/css/condcom.html

了解有关条件评论的更多信息

如何覆盖表nowrap属性

3 个答案: