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

Question

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

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

http://jsfiddle.net/s7va8mLc/1/

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;
}

预期结果:

IE8-9 结果:

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;
}