如何限制表格单元格的宽度并隐藏溢出的内容

Question

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

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

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

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

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

UPDATE

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

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

Answer 1

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

&: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并坚持下去。

Answer 2

编辑：

给出宽度单位为vw （视口宽度）。 注意table（ width ），first-child（ width ， min-width ）和last-child（ width ， max-width ）的scss发生了变化。

该vw在jsfiddle中表现异常，仅在.html尝试。

.table {
  display: table;
  padding: 0.25rem;
  width:90vw;

  .row {
    display: table-row;

    .cell {
      display: table-cell;
      border: 1px solid gray;
      padding: 0.25rem;

      &:first-child {
        white-space: nowrap;
        width:20vw;
        min-width:20vw;
      }

      &:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70vw;
        max-width: 70vw;
        text-align: right;
      }
    }
  }
}

以前

通过max-width:100%它可以拉伸为完整尺寸的父级。 您需要将其限制为一定百分比或像素才能达到理想的效果。

删除了width:100%因为它没有用，并更改了max-width:200px

&:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: 100%; */
        max-width: 200px;
        text-align: right;
      }