无法让点显示在嵌套的 flex 控件中

Question

如this fiddle所示，第一个单元格没有空间并被切断。但是，我那里缺少省略号。

当我用谷歌搜索这个问题时，我得到我可能想将 overflow:hidden 添加到父组件。所以我做了。到每个组件。随便用。

div.data-row {
  display: flex;
  width: 100%;
  overflow: hidden;
}

div.data-row-cell {
  display: flex;
  overflow: hidden;
}

div.data-row-caption {
  text-align: left;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

我错过了什么？！

Answer 1

我能够通过在 flex 子元素中添加一个附加元素并在 that 元素上设置省略号样式来使省略号工作。

div.data-row-caption {
  text-align: left;
  flex: 1;
  overflow: hidden;
}

div.data-row-caption>span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="data-row-cell data-row-caption">
  <span>{{caption that is really long}}</span>
</div>
<div class="data-row-cell data-row-value">{{data}}</div>

无法让点显示在嵌套的 flex 控件中

Can't get the dots to show in a nested flex control

css

flexbox

overflow

ellipsis