Flex布局和省略号

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值

  1. 因为width是和省略号样式配套使用的
  2. 为什么随便设置一个widht值都可以生效,因为这里的div/p/span元素宽度需要自适应,所以设置了flex:auto,这时元素的宽度相当于是auto,那么width设置什么值都会被忽略,仅仅是为了配合省略号的样式生效而已
相关推荐
笔尖的记忆15 分钟前
渲染引擎详解
前端
大明二代21 分钟前
为 Angular Material 应用添加完美深色模式支持
前端
Mintopia28 分钟前
🚪 当 Next.js 中间件穿上保安制服:请求拦截与权限控制的底层奇幻之旅
前端·后端·next.js
Mintopia28 分钟前
🚗💨 “八缸” 的咆哮:V8 引擎漫游记
前端·javascript·v8
源去_云走28 分钟前
npm 包构建与发布
前端·npm·node.js
Sport33 分钟前
面试官:聊聊 Webpack5 的优化方向
前端·面试
码农欧文33 分钟前
关于npm和pnpm
前端·npm·node.js
Restart-AHTCM35 分钟前
前端核心框架vue之(路由核心案例篇3/5)
前端·javascript·vue.js
二十雨辰1 小时前
vite快速上手
前端
Dxy12393102161 小时前
Python对图片进行加密,js前端进行解密
前端·javascript·python