Question

此代码适用于每个浏览器，当然除了IE8和IE9。不幸的是，不允许这些特定用户在其环境中使用任何其他浏览器。谷歌搜索了3个小时，尝试了所有可能的CSS解决方案，但它不会工作。请指教。

table-layout: fixed不起作用，因为表格单元格需要具有特定的宽度。

http://jsfiddle.net/s7va8mLc/1/embedded/result/（对于IE8视图）

HTML：

<table>
    <tr>
        <th>Test</th>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

CSS：

table {
    width: 500px;
    border: 1px dotted blue;
}

th {
    width: 250px;
}

td {
    width: 250px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dotted red;
}

预期结果：

Expected result

IE8-9结果：

IE8-9 result

Answer 1

试试这个，希望它有所帮助（在IE8本地测试）。

http://jsfiddle.net/s7va8mLc/7/

http://jsfiddle.net/s7va8mLc/7/embedded/result/

HTML

<table>
 <tr>
    <th>Test</th>
    <td>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </span>
    </td>
 </tr>
</table>

CSS

table {
    width: 500px;
    border: 1px dotted blue;
}
th {
    width: 250px;
}
td, span {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    display: block;
    border: 1px dotted red;
}

Answer 2

要获得Internet Explorer的兼容性，您需要在顶部输入类型标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

现在再次运行，我希望它能解决您的问题。

Answer 3

在你的td中放置一个像p，span，label这样的标签，并将其宽度设置为小于div宽度。然后它会工作。

Answer 4

只需将td width property用于50%而不是标记，它将适用于我认为的所有浏览器。

<强> check this fiddle

<table>
    <tr>
        <td  class="text-center" width="50%">Test</td>      
        <td width="50%">
            Lorem ipsum dolor sit amet, ...
        </td>
    </tr>
</table>

.text-center{  
    text-align:center;
    font-weight:bold;
}

表格单元格上的文本溢出省略号在IE8和IE9中不起作用

4 个答案: