Flex布局下文本溢出省略

Flexbox中设置文本溢出省略的问题。

文字直接在flex子元素中，生效

文字直接在flex子元素中，对文字进行溢出省略处理，生效：

文字在flex子元素的子元素中，失效

文字在flex子元素的子元素中，对文字进行溢出省略处理，失效：

解决方案：

1.在flex子元素flex-child设置min-width: 0;

或者根据实际情况设置min-width为其他值。

.flex-child {
  min-width: 0;
}

2.在flex子元素flex-child设置overflow: hidden;

.flex-child {
  overflow: hidden;
}