資訊專欄INFORMATION COLUMN
?
解決辦法，父div設(shè)置min-width:0即可
flex: 1;
min-width: 0;
?
w3c上面是這樣說的
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).
因?yàn)樵O(shè)置了white-space:nowrap，所以content沒法收縮了，設(shè)置0后就有了固定尺寸就可以收縮了
?
記錄走過的路，踩過的坑，互勉。
前端交流群：87709616
有不同意見的可以留言，我們一起討論。
轉(zhuǎn)載至：https://segmentfault.com/q/1010000011466651/a-1020000011490454
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1097.html
摘要：后兩個屬性可選，該屬性有兩個快捷值和。屬性定義了項(xiàng)目的縮小壓縮比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。當(dāng)我們設(shè)置，項(xiàng)目控件由于不能計(jì)算多余的空間導(dǎo)致無法收縮了。 寫在最前：當(dāng)flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個方案任意選擇！ 一、場景： showImg(https://segm...
摘要：需求在中實(shí)現(xiàn)布局預(yù)期效果為左側(cè)一個正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱下方為個性簽名單行顯示，超出實(shí)際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。 需求： 在item中實(shí)現(xiàn)布局預(yù)期效果為：左側(cè)一個正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱、下方為個性簽名（單行顯示，超出實(shí)際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...
摘要：需求在中實(shí)現(xiàn)布局預(yù)期效果為左側(cè)一個正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱下方為個性簽名單行顯示，超出實(shí)際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。 需求： 在item中實(shí)現(xiàn)布局預(yù)期效果為：左側(cè)一個正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱、下方為個性簽名（單行顯示，超出實(shí)際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...
摘要：單行文本省略和元素及其父元素的屬性都無關(guān)元素或?yàn)樵貎?nèi)單行文本省略，需要給元素或?yàn)樵靥砑訕邮綖樵氐淖釉厝绻亲赃m應(yīng)寬度時，內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給添加樣式單行文本省略是現(xiàn)代網(wǎng)頁設(shè)計(jì)中非常常用的技術(shù)，幾乎每個站點(diǎn)都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標(biāo)題、文章摘要等。在響應(yīng)式開發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對網(wǎng)頁開發(fā)這造成困擾。因此，本文將要...
閱讀 3867·2021-11-12 10:36
閱讀 3923·2021-09-22 15:48
閱讀 3621·2019-08-30 15:54
閱讀 2710·2019-08-29 16:44
閱讀 2440·2019-08-29 16:08
閱讀 2523·2019-08-29 16:06
閱讀 1390·2019-08-29 15:21
閱讀 3358·2019-08-29 12:39
