flex 遇到white-space:nowrap


背景,做一個前面圖片寬度固定,后面寬度自適應,使用到了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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM