html - 如何限制表格单元格的宽度并 overflow hidden 的内容

我正在尝试用一行创建一个两列CSS表（也尝试过HTML表），其中第一列是一行文本，它会扩展以适合内容。第二列必须是右对齐的单行文本，并向左扩展直到它到达第一列，然后变成省略号。

第一列与white-space: nowrap;一起使用。第二列是问题：

当内容的长度大于第二列的最大宽度时，它将自动换行。一旦添加white-space: nowrap;，它就会溢出并忽略width，max-width和overflow: hidden；

这是一个JSFiddle，显示了我要得到的和我要得到的。谢谢！

https://jsfiddle.net/esodell1/oq59jkr3/10/

更新

感谢您的答复，但我找到了一种使用flex box完成此操作的方法！

https://jsfiddle.net/esodell1/jdykzv5m/13/

最佳答案

这就是文本溢出技术的工作方式。它的父级或最接近的父级必须具有定义的宽度。您需要为单元格定义一个宽度，例如：

&:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
  text-align: right;
}

但是，您还必须限制表，因为表自然会尝试通过使用table-layout来扩展其子级中所需的内容：

.table {
  display: table;
  padding: 0.25rem;
  table-layout: fixed;
  width: 100%;
}

当单元格达到其可用宽度的85％时，这将使右列创建省略号。您将要面对的问题是处理左列，因为您还设置了no-wrap，因此该列实际上可能超过15％的宽度并与右重叠。问题是您的列试图不换行并争夺表空间，您需要在左列应用相同的text-overflow技术。请参见此处的上一个和最后一个示例：

https://jsfiddle.net/bhL6sx0g/

老实说，如果您要处理很多这样的动态内容，而又不想包装，则可能需要在其顶部添加一个JS层来为您做一些调整，否则最好的选择是委托实际的宽度，例如15/85并坚持下去。