css - 当父 div 设置宽度时，为什么省略号不能与 table-cell 一起使用？

Question

我正在尝试将省略号应用于表格单元格，但根据父 div 设置单元格宽度。

考虑下面的例子(JS fiddle here http://jsfiddle.net/zncGk/):

HTML

<div class="mydiv">

<table>
    <tbody>
        <tr><td>Hello Stack Overflow</td></tr>
    </tbody>
</table>

</div>

CS

.mydiv{
    width:50px;
}

td {
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:block;

}

JS

$(function() {
    console.log("width = " + $("td").width());
});

输出为:width = 132，省略号没有出现。

我在这里错过了什么？如果我直接设置表格单元格宽度，则省略号有效，但我需要由父 div 设置。

Answer 1

您的代码很好并且可以工作，但是您在演示中提供了像这样的 wi dith 宽度空间。看到这个工作 demo

编辑

如果你想省略 make work，你需要将 table-layout 设置为 fixed 并将你的 table 设置为 100%。

table{
    table-layout: fixed;
    width: 100%;
}

demo