Flex布局和省略号

喵爱吃鱼2025-04-27 16:31

css 复制代码

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

css 复制代码

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

css 复制代码

// 省略两行
.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值

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