固定高度和自动换行的CSS问题

时间:2012-02-04 15:00:10

标签: html css html-table word-wrap

我的表格编码如下;

<table style="table-layout:fixed">
<tr>
    <td class="htTd" width="100" style="word-wrap:break-word">someDynamicLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtextsomeLongtext</td>
    <td class="htTd" width="100" style="word-wrap:break-word">someLongtextsomeLongtextsomeLongtext</td>
</tr>
<tr>
    <td class="htTd" width="100" style="word-wrap:break-word">someContentsomeContentsomeContent</td>
    <td class="htTd" width="100" style="word-wrap:break-word">someContent</td>
</tr>
</table>

在CSS中,我有

htTd{height:30px}

现在的问题是,由于内容是动态的(来自JSP),因此长文本无法在IE中正确包装。在IE中,它显示2行,只隐藏其余内容。它在Firefox中正确包装。

虽然可以通过从CSS中删除height属性来修复问题...不幸的是我无法做到这一点,因为我的CSS被用在许多其他文件中,因此我无法更改CSS。

如何通过在CSS中添加任何其他CSS属性来解决问题?

2 个答案:

答案 0 :(得分:1)

我认为该属性应该是破解词。此

<td class="htTd" width="100" style="word-wrap:break:word">

应该是:

 <td class="htTd" width="100" style="word-wrap:break-word">

答案 1 :(得分:0)

例如,你可以在表格中添加一个id并写下这样的内容:

#tableId td{height: auto !important;}

或只是

#tableId .htTd{height: auto} (i would vote for that one)