flex下省略号的问题解决
2024-10-19 14:41:44
最近在搞微信小程序,发现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>
最新文章
- Android SDK Android NDK Android Studio 官方下载地址
- IOS 集成第三方登录
- [百度地图] MultiZMap 修改使用;
- Hadoop学习笔记: HDFS
- js encodeURI方法认识
- 将n(0<;=n<;=10000)的阶乘分解质因数,求其中有多少个m
- The Famous Clock
- C#基础知识回顾-- 反射(1)
- IEnumerable 和 IQueryable
- 类中成员函数与数据成员private/pubic/protected
- onkeypress事件.onkeydown事件.onkeyup事件
- char数组和String互转
- HDU 4685 Prince and Princess
- [编织消息框架][JAVA核心技术]动态代理应用4
- 解决 win10飞行模式 无限自动开关 无法关闭
- iOS进阶之正则表达式
- IDEA 编译 Jmeter 5.0(二次开发)
- 树莓派dhcp server
- 【10.21总结】一个渗透测试练习实例——发现未知的漏洞(Race condition)
- window下完全删除nodejs
热门文章
- 如何正确使用 Spring Cloud?【中】
- 完整开发流程管理提升与系统需求分析过程 随堂笔记(day 1) 【2019/10/14】
- Repository封装方法
- 针对上一篇prim最后的完善结果
- 二分查询-leetcode
- 一个类实现Java截屏并保存到指定文件夹
- STL常用结构与方法简明总结
- SQLserver还原失败(数据库正在使用,无法获得对数据库的独占访问权)
- C#中try catch中throw ex和throw方式抛出异常有何不同_异常捕获堆栈丢失问题
- C# -- RSA加密与解密