成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

display: flex;’布局下使用‘white-space: nowrap;’導(dǎo)致的問(wèn)題

waruqi / 2120人閱讀

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

需求：

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

代碼： wxml布局: 
  
    
    
      姓名
      這個(gè)人很懶，什么都沒(méi)寫。這個(gè)人很懶，什么都沒(méi)寫。
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;
}
效果：

問(wèn)題：

為了自適應(yīng)屏幕大小，這里父布局采用flex，展示個(gè)性簽名的view對(duì)應(yīng)的class為signature，其中我通過(guò)“overflow: hidden; text-overflow: ellipsis; white-space: nowrap;”來(lái)實(shí)現(xiàn)單行顯示，超出實(shí)際能顯示的最大寬度則用‘...’代替的效果。但是在實(shí)際效果如上圖所示，當(dāng)內(nèi)容超出實(shí)際可顯示寬度時(shí)，擠壓推出左側(cè)布局以顯示signature中的內(nèi)容，導(dǎo)致左側(cè)布局的變形甚至被擠出。

解決辦法：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/55027.html

相關(guān)文章

  • display: flex;’布局下使用‘white-space: nowrap;’導(dǎo)致的問(wèn)題

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

    caspar 評(píng)論0 收藏0

  • flex布局遇到white-space:nowrap怎么超出一行顯示省略號(hào)

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

    tylin 評(píng)論0 收藏0

  • 土旦：關(guān)于display:flex碰上white-space nowrap 影響布局的問(wèn)題

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

    lbool 評(píng)論0 收藏0

  • 自適應(yīng)寬度元素單行文本省略用法探究

    摘要：?jiǎn)涡形谋臼÷院驮丶捌涓冈氐膶傩远紵o(wú)關(guān)元素或?yàn)樵貎?nèi)單行文本省略，需要給元素或?yàn)樵靥砑訕邮綖樵氐淖釉厝绻亲赃m應(yīng)寬度時(shí)，內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給添加樣式單行文本省略是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常常用的技術(shù)，幾乎每個(gè)站點(diǎn)都會(huì)用到。單行文本省略適用于顯示摘要信息的場(chǎng)景，如列表標(biāo)題、文章摘要等。在響應(yīng)式開發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對(duì)網(wǎng)頁(yè)開發(fā)這造成困擾。因此，本文將要...

    K_B_Z 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<