当嵌套在具有表格显示的元素内部时，为什么无包装宽度计算会发生变化？

Question

根据我们的设计，我们最终需要多列来显示带有省略号的标题，我不希望这些标题是一个大问题，但当它们嵌套在display: table内时，计算似乎是不正确的。

需要注意的是，我们需要一个响应式布局，因此需要百分比宽度（固定宽度可以解决问题）。我们的布局确实需要display: table更远的树，我不能在没有主要重构的情况下删除它。

如果你移除显示屏，一切都按照我的预期运作：

EXPECTED

但是具有该显示会导致父母考虑预先截断的子元素总宽度（但考虑到nowrap）。就好像初始渲染没有定义溢出一样，并在事后添加它（但到那时宽度计算太大了）。

RESULT

我可以猜测为什么渲染会破坏但是我想要一个关于浏览器渲染方式的更明确答案...（在Mac上的Chrome / FF / Safari中测试）

Answer 1

这个原因与使用auto布局方法时表格布局单元格的方式有关。

有关其工作原理的详细信息在section 17 of the CSS spec中进行了解释，但关键点在于auto布局取决于单元格的内容（这就是为什么当您强制使用内容时它会如此之大在一行上），而fixed布局仅取决于表格宽度（这正是您所期望的）。

如果您只是将table-layout:fixed添加到.table选择器，则应解决您的问题。