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，而不是其中的跨度。

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