flex项目内的CSS省略号

您可以添加

min-width: 0;

.flex--1 {  flex: 1 1 auto;  min-width: 0;}

或添加

overflow: hidden;

.flex--1 {  flex: 1 1 auto;  overflow: hidden; }

jsFiddle

为什么？

[4.5。弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新

auto

值作为CSS 2.1中定义的

min-width

和

min-height

属性的初始值 。

或者，您可以将内容包装到容器中。

.container {  display: table;  table-layout: fixed;  width: 100%;}.ellipsis {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}