土旦：關于display:flex碰上white-space nowrap 影響布局的問題

lbool 發布于2019-04-23 11:44 / 2784人閱讀

背景，做一個前面圖片寬度固定，后面寬度自適應，使用到了flex布局，但是想讓后面div里文字不換行，超出以點點表示時，這時布局就亂了，查了下，原來flex布局與white-space:nowrap有影響

解決辦法，父div設置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).

因為設置了white-space:nowrap，所以content沒法收縮了，設置0后就有了固定尺寸就可以收縮了

記錄走過的路，踩過的坑，互勉。

　　前端交流群：87709616

有不同意見的可以留言，我們一起討論。

轉載至：https://segmentfault.com/q/1010000011466651/a-1020000011490454

GPU云服務器云服務器布局遇到的問題關于javascript的問題關于php的問題關于系統錯誤的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1097.html

flex布局遇到white-space:nowrap怎么超出一行顯示省略號

摘要：后兩個屬性可選，該屬性有兩個快捷值和。屬性定義了項目的縮小壓縮比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據的主軸空間。當我們設置，項目控件由于不能計算多余的空間導致無法收縮了。寫在最前：當flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個方案任意選擇！一、場景： showImg(https://segm...

tylin 2019-08-30 15:44 評論0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’導致的問題

摘要：需求在中實現布局預期效果為左側一個正圓形的用戶頭像，右側的上方為該用戶昵稱下方為個性簽名單行顯示，超出實際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。需求：在item中實現布局預期效果為：左側一個正圓形的用戶頭像，右側的上方為該用戶昵稱、下方為個性簽名（單行顯示，超出實際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...

waruqi 2019-08-02 16:17 評論0 收藏0
display: flex;’布局下使用‘white-space: nowrap;’導致的問題

摘要：需求在中實現布局預期效果為左側一個正圓形的用戶頭像，右側的上方為該用戶昵稱下方為個性簽名單行顯示，超出實際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。需求：在item中實現布局預期效果為：左側一個正圓形的用戶頭像，右側的上方為該用戶昵稱、下方為個性簽名（單行顯示，超出實際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...

caspar 2019-08-30 10:51 評論0 收藏0
自適應寬度元素單行文本省略用法探究

摘要：單行文本省略和元素及其父元素的屬性都無關元素或為元素內單行文本省略，需要給元素或為元素添加樣式為元素的子元素如果是自適應寬度時，內的子元素實現單行文本省略，需要給添加樣式單行文本省略是現代網頁設計中非常常用的技術，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應式開發中，自適應寬度元素單行文本省略容易失效不起作用，對網頁開發這造成困擾。因此，本文將要...

K_B_Z 2019-04-23 13:46 評論0 收藏0