Flex布局和省略号

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

// 省略一行
.content {
    display: flex;
    width: 100%;
    & > span {
      .ellipsis-text();
      flex: auto;
      width: 0;
    }
  }

// 省略两行
.title {
    display: flex;
    width: 100%;
    & > span {
      .ellipsis-text();
      flex: auto;
      width: 0;
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

通常情况下，省略号是和固定宽度width：xx一起使用的，但是会有这样的需求：

• 子元素的宽度根据浏览器的宽度自适应
• 但是如果子元素内容超过容器可容纳的宽度，则显示为省略号

现在的问题是:

• 如果使用固定宽度，无法实现宽度自适应
• 如果使用flex-auto，无法显示省略号

解决办法:

随便设置一个width值

1. 因为width是和省略号样式配套使用的
2. 为什么随便设置一个width值都可以生效，因为这里的div/p/span元素宽度需要自适应，所以设置了flex:auto，这时元素的宽度相当于是auto，那么width设置什么值都会被忽略，仅仅是为了配合省略号的样式生效而已