如何在 flex 布局下让过长的文本截断显示 ...

通常我们会使用固定宽度来截断文本并显示 ...，样式通常写法如下：

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}

但在 flex 布局中，当设置了 flex: 1 的情况下，宽度就失去了作用，这时候怎么办呢？

答案是将 width 设置为 0，即

.ellipsis {
  flex: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}