css - 当嵌套在显示表格的元素内时，为什么不换行宽度计算会发生变化？

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 选择器，您的问题应该得到解决。