css3 - 这种情景怎么解释?display:flex 遭遇 white-space: nowrap;
问题描述
html如下,使用了flex-box布局,左边图片的img-box定宽,右边的css定义了flex-item,然后对shop-name进行了单行不换行截断,这时候就发现左边的图片被挤扁了,小于定的宽度。发生这个情况在chrome上,ios和安卓的微信下正常.
chrome效果见图:
<a href='https://www.haobala.com/wenda/5874.html#' class='coupons-item flex'> <p class='img-box'><img src='https://www.haobala.com/wenda/1.jpg' /></p> <p class='flex-item'><h3 class='shop-name'>有家餐厅(京华城店)</h3><p class='text'>满100减20</p> </p></a>
(scss)
.coupons-item{ padding:1rem; color:#000; text-decoration: none; border-bottom:1px solid $gray-border-color; .img-box{ width:6rem; height:6rem; margin-right:1rem; @include radius(50%); overflow: hidden; img{ display: block; width:100%; height:100%; @include radius(50%); } } .shop-name{ line-height:2; height:3.6rem; font-weight:normal; font-size:1.8rem; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .text{ font-size:1.4rem; }}
问题解答
回答1:之前遇到过,解决办法:首先.flex-item设置下最小宽度
min-width:0
然后.shopname设置下宽度
width:100%回答2:
shop-name定义宽度浮动试下
回答3:给.shop-name设一个最大宽度试试吧
相关文章:
1. javascript - 引入 simditor,但是显示标签,这个怎么解决。2. android - 目前有哪些用Vue.js开发移动App的方案?3. python - scrapy获取网页指定内容,后翻到下一页继续,固定循环次数。。问题4. python 发邮件5. javascript - 仿着echarts官网的地图做了个例子,但是只显示出来了地点,没有画出飞机动态效果??急6. android - 安卓实现类似QQ刚换聊天背景的功能7. 为什么要通过常量的方式拐弯抹角的写呢,直接写DSN之类的不好吗8. javascript - js写一个递归把数据结构重组成另外的结构9. python - 一个关于爬虫的问题10. java - Jenkins项目构建完成后,可以访问吗?