如何使省略号出现在文本中

Question

有关详细信息，请参考fiddle。底线是样式

.cutty {
  display: flex;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

在单击按钮时似乎并没有强制点号。这说明了封闭的父项具有样式

.left {
  display: flex;
  flex: 1;
  overflow: hidden;
}

目的是确保粉色 cutty 在紫色 left 中获得大部分宽度，而棕色 fixies 保持相同宽度。当然，我要消除空白处的包裹并切断溢出的部分。

我的谷歌搜索建议的方法是确保将封装父对象设置为也隐藏溢出。但是，正如小提琴中所示，这不会发生。也有人提到最小宽度设置为零。尝试这样做没有任何帮助。

我想念什么？

Answer 1

如果您将display: flex;中的.cutty删除是您希望实现的目标？