表格单元格中的空白：'nowrap' 破坏了表格布局：'auto'：如何修复它？

Question

我正在尝试设计一个音乐播放列表：https://codepen.io/anon/pen/xLYLvd

我的基本元素是一个 HTML 表格。

我用

table-layout:auto;

对于我的表格，因为我希望单元格适合其内容；因为我并不总是知道它们会持续多久（尤其是本示例的最后两列，.wpsstm-track-actions 和 .wpsstm-track-sources，其中项目的数量会有所不同）。

我想要截断 3 列（曲目信息）（这些是曲目艺术家、标题和专辑单元格；它们具有 .wpsstm-track-info 类），因为我希望将每一行保留在单个文本行上。

但是使用

white-space: nowrap;

在这些单元格上，我的设计中断了：似乎 table-layout:auto 和 white-space:nowrap 不能一起使用（参见第 49 行笔）

关于如何在这方面取得成功的任何想法？谢谢！

Answer 1

text-overflow: ellipsis 仅适用于table-layout: fixed

此外，您需要为表格设置宽度并将文本溢出应用于 td，而不是其中的跨度。

https://codepen.io/anon/pen/xLYPBK

恐怕您必须为 .wpsstm-track-actions 和 .wpsstm-track-sources 设置静态宽度。但从设计的角度来看，这确实应该没有问题。