Question

我正在尝试制作一个具有两行的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/

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（视口宽度）为单位给出宽度单位。注意表（width），第一个孩子（width，min-width）和最后一个孩子（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;
      }

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

2 个答案: