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设置什么值都会被忽略,仅仅是为了配合省略号的样式生效而已
相关推荐
lssjzmn4 分钟前
性能飙升!Spring异步流式响应终极指南:ResponseBodyEmitter实战与架构思考
java·前端·架构
毕设源码-郭学长9 分钟前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙14 分钟前
初识Vue
前端·javascript·vue.js
Javian39 分钟前
浅谈前端工程化理解
前端
艾小码41 分钟前
新人必看!3天啃下大型前端项目,我是这样做到的
前端
袁煦丞44 分钟前
宝塔FTP远程文件管理+安全防护:cpolar内网穿透实验室第417个成功挑战
前端·程序员·远程工作
三十_1 小时前
【NestJS】构建可复用的数据存储模块 - 动态模块
前端·后端·nestjs
干就完了11 小时前
js数组方法,其实也就这么多东西,一篇全搞懂
前端·javascript
JIE_1 小时前
【Hero动画】用一个指令实现Vue跨路由/组件动画
前端
aidingni8881 小时前
Comet浏览器不为人知的故事
前端·javascript