最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下,依然不行,原来在上层父级就是flex那一级别也需要设置 min-width:0; 就是可以理解为 省略号标签的flex-item以及所在的flex父级 都需要设置min-width:0;

CSS:

.flex {
display: flex;
align-items: center;
align-content: center;
justify-content: space-between;
min-width: 0; /* 这里也要设置 */
}
.flex__item {
min-width: 0; /* 这里需要设置 */
}
.flex__item--fixed {
flex: 0 0 auto;
}
.fs--ellip {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} .home-shop {
max-width: 750px;
}
.home-shop__img {
width: 98px;
height: 98px;
}
.home-shop__main {
padding: 0 36px 0 18px;
}
.home-shop__fans {
padding: 16px 16px 16px 26px;
border-left: 2px solid #eee;
}

 HTML:

<div class="flex box home-shop">
<div class="flex">
<img class="flex__item--fixed home-shop__img" src="https://javascript.shop/apple-touch-icon.png" />
<div class="flex__item home-shop__main">
<div class="fsz28 fs--ellip">杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字</div>
<div class="fsz22 color-9">社区小商城</div>
</div>
</div>
<div class="flex flex__item--fixed">
<div class="text-c home-shop__fans">
<div class="fsz28 color-cyan bold">568</div>
<div class="fsz22 color-9">粉丝数</div>
</div>
<div class="text-c home-shop__hot">
<div class="fsz28 color-o bold">1898</div>
<div class="fsz22 color-9">购买指数</div>
</div>
</div>
</div>

  

flex下省略号的问题解决的更多相关文章

  1. linux 下Time_wait过多问题解决

    linux 下Time_wait过多问题解决 net.ipv4.tcp_syncookies = 1表示开启SYN Cookies.当出现SYN等待队列溢出时,启用cookies来处理,可防范少量SY ...

  2. STM32单片机在Keil5下仿真的问题解决及GPIO口初始化、使用

    STM32单片机在Keil5下仿真的问题解决及GPIO口初始化.使用 最近看了视频,里面有仿真,可以清楚看到GPIO口的数据变化,也想尝试下,DUG时却出现*** error 65: access v ...

  3. display:flex;下的子元素width无效问题

    因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...

  4. Flex下拉框

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  5. ElementUI el-table 在flex下的宽度自适应问题

    BUG:在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据,在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小. Debug:通过控制台发现组件生成的tabl ...

  6. 疑难问题解决备忘录(1)——LAMP环境下WordPress无法发现themes目录下的主题问题解决

    程序猿的宿命就是无穷无尽地解题,虽然可以说是解题的机器,但也无法达到解题之神的境界,碰到自己解决不了的问题那是家常便饭,尤其当遍寻Google和StackOverflow花了九牛二虎之力才解决的问题, ...

  7. ios7下不能录音问题解决

    在ios6上运行非常正常的AVAudioRecoder组件,而跑到ios7上就不能工作了.通过google搜索在stackoverflow上的解决方法.http://stackoverflow.com ...

  8. ie7下z-index失效问题解决方法(详细分析)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...

  9. unix网络编程第三版源代码ubuntu下配置的问题解决

    第一步:首先下载本书配套的源码unpv13e.tar.gz 第二步:解压后进入根文件夹有一个README 4 Execute the following from the src/ directory ...

随机推荐

  1. [JZOJ A组]球 题解

    球(ball) [问题描述] 小 T 有 n 个桶和 2n − 1 个球,其中第 i 个桶能装前 2i − 1 个球.每个桶只能装一个球. 现在小 T 取了 m 个桶和 m 个球,并将这些球各自放在 ...

  2. 【CV现状-3.0】"目标"是什么

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  3. ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示

    场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  4. wx-icon和progress

    基本内容 index.wxml <!--index.wxml--> <view class="container"> <!--icon text pr ...

  5. 新手Linux之路之Deepin

    用了很久的Window,心血来潮想换个系统,于是就开始踩坑Linux之路. 系统为deepin 首先基本的 设置root密码 $:sudo passwd root [sudo] password fo ...

  6. Hive初步认识,理解Hive(一)

    Hive初步认识,理解Hive(一) 用了有一段时间的Hive了,之前一直以为hive是个数据库,类似Mysql.Oracle等数据库一样,其实不然. Hive是实现Hadoop 的MapReduce ...

  7. VisualStudio编译不生成xml、pdb文件的方法

    我们为了减少发布/Release时项目的体积,希望在编译时不生成xml注释文档(包括引用的其他类库),和pdb调试文件 用你喜欢的文本编辑器打开项目.csproj文件,找到PropertyGroup节 ...

  8. PHP switch的写法

    switch switch (expression) { case label1: expression = label1 时执行的代码 ; break; case label2: expressio ...

  9. python总结【来自Runoob】

    test.py #!/usr/bin/python print "Hello, Python!"; $ chmod +x test.py # 脚本文件添加可执行权限 $ ./tes ...

  10. 附007.Kubernetes ABAC授权

    一 ABAC 1.1 ABAC授权 基于属性的访问控制(ABAC)定义了访问控制范例,通过使用将属性组合在一起的策略向用户授予访问权限. 使用--authorization-policy-file=S ...