相关疑难解决方法(0)

我正在使用flexbox在窄列中显示文本标签以及数值,以便在文本不适合的情况下使用省略号截断文本.

它工作得很好,直到我需要将整个列放在一个表格单元格中 - 此时浏览器(Chrome)只是忽略了列宽并使表格足够宽以适应所有文本.

这是标签布局:

<div class="line">
    <span>Very long label text</span>
    <span>12345</span>
</div>

.line {
    display: flex;
    width: 100%;
}
.line span:first-child {
    white-space: nowrap;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line span:last-child {
    flex-shrink: 0;
    margin-left: 5px;
}

将其放置在具有固定宽度的常规div中可按预期工作.将其放在表格单元格中不会:

小提琴:http://jsfiddle.net/98o7m7am/

.wrapper {
  width: 150px;
}
.table {
  display: table;
}
.table > div {
  display: table-cell;
}
.line {
  display: flex;
  width: 100%;
}
.line span:first-child {
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis; …