display: flex;’布局下使用‘white-space: nowrap;’導致的問題

caspar 發布于2019-08-30 10:51 / 1104人閱讀

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

需求：

在item中實現布局預期效果為：左側一個正圓形的用戶頭像，右側的上方為該用戶昵稱、下方為個性簽名（單行顯示，超出實際能顯示的最大寬度則用‘...’代替）。如圖：

代碼： wxml布局:

  
    
    
      姓名
      這個人很懶，什么都沒寫。這個人很懶，什么都沒寫。

wxss樣式：

.member-item {
  margin-top: 1px;
  padding: 15rpx 30rpx;
  display: flex;
  flex-direction: row;
  background-color: white;
  width: auto;
}
 
.avatar {
  background-color: whitesmoke;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
}
.info {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  flex: 1;
}
.name {
  font-size: 30rpx;
  color: #333;
  line-height: 48rpx;
}
.signature {
  font-size: 28rpx;
  color: #888;
  line-height: 48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果：

問題：

為了自適應屏幕大小，這里父布局采用flex，展示個性簽名的view對應的class為signature，其中我通過“overflow: hidden; text-overflow: ellipsis; white-space: nowrap;”來實現單行顯示，超出實際能顯示的最大寬度則用‘...’代替的效果。但是在實際效果如上圖所示，當內容超出實際可顯示寬度時，擠壓推出左側布局以顯示signature中的內容，導致左側布局的變形甚至被擠出。

解決辦法：

在signature的父布局info中添加樣式min-width: 0;即可解決。

云服務器 GPU云服務器 flex布局布局遇到的問題 flex在linux下安裝布局問題

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

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

display: flex;’布局下使用‘white-space: nowrap;’導致的問題

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

waruqi 2019-08-02 16:17 評論0 收藏0
flex布局遇到white-space:nowrap怎么超出一行顯示省略號

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

tylin 2019-08-30 15:44 評論0 收藏0
土旦：關于display:flex碰上white-space nowrap 影響布局的問題

背景，做一個前面圖片寬度固定，后面寬度自適應，使用到了flex布局，但是想讓后面div里文字不換行，超出以點點表示時，這時布局就亂了，查了下，原來flex布局與white-space:nowrap有影響 ? 解決辦法，父div設置min-width:0即可 flex: 1; min-width: 0; ? w3c上面是這樣說的 By default, flex items won’...

lbool 2019-04-23 11:44 評論0 收藏0
自適應寬度元素單行文本省略用法探究

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

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