<分区>
<分区>
如图this fiddle ，第一个单元格没有空间并被切断。但是，我在那里缺少省略号。
当我用谷歌搜索这个问题时，我得到了 the suggestion我可能想将 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;
}
我错过了什么？!
最佳答案
通过在 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>
关于css - 无法让点显示在嵌套的 flex 控件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55502501/