码迷,mamicode.com
首页 > 其他好文 > 详细

flex 遇到white-space:nowrap

时间:2017-09-05 20:07:18      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:解决   表示   wrap   图片   ext   overflow   bsp   div   宽度   

背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

解决办法,父div设置min-width:0即可

 <div style="width:100%;display:flex;height:80px"><div style="width:50px"><img src="~/Content/Img/2.png" style="height:50px;" /></div><div style="flex:1;min-width:0">
                <div style="width:100%;height:40px;text-align:left;font-size:16px">
                    *******
                </div>
                <div style="width:100%;height:40px;text-align:left;font-size:14px;padding-left:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                 *********
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

 

flex 遇到white-space:nowrap

标签:解决   表示   wrap   图片   ext   overflow   bsp   div   宽度   

原文地址:http://www.cnblogs.com/stubborn-donkey/p/7481649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!