国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

tylin / 3349人閱讀

摘要：后兩個(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)景：

二、簡(jiǎn)化場(chǎng)景：

三、頁(yè)面布局： 
    
      
  • 
        
    
          
     英短貫徹愛(ài)與真實(shí)的邪惡，可愛(ài)又迷人的反派角色！
    
        
    
      
    •
四、問(wèn)題樣式： 
.g-list-item {
    position: relative;
    display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
}
.item-content-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}
.item-content-wrap  .item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
五、解決方法： 方案1：

①原理：
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選，
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。

.item {
  flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}

flex-grow屬性定義項(xiàng)目的放大（拉伸）比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項(xiàng)目的縮小（壓縮）比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

當(dāng)我們?cè)O(shè)置white-space:nowrap，項(xiàng)目控件由于不能計(jì)算多余的空間導(dǎo)致無(wú)法收縮了。此時(shí)我們?cè)O(shè)置固定尺寸就可以收縮了

②代碼：

.g-list .item-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 +  min-width: 0;
}
.g-list .item-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 +  overflow:hidden;
}

給文字.item-title的父級(jí)設(shè)置寬度，通過(guò) min-width、max-width、width屬性都可以設(shè)置，但因?yàn)槲淖值拈L(zhǎng)度不定設(shè)置width或者max-width都有可能遮住有效區(qū)域，所以建議使用min-width: 0比較符合；除此之外通過(guò)overflow: hidden使得父元素變?yōu)锽FC也能達(dá)到同樣的效果

 min-width: 0;
 min-width: 300px;
 max-width: 300px;
 width: 300px;
 overflow: hidden;
方案2：

①原理：
其實(shí)導(dǎo)致這種情況發(fā)生的不是父級(jí)item-content-wrap的flex，而是爺級(jí)g-list-item的flex，如果我們布局是上下結(jié)構(gòu)，可以去掉爺級(jí)的display: flex達(dá)到相應(yīng)效果
②代碼：

.g-list-item {
    position: relative;
  — display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
}
方案3：

①原理：
利用樣式達(dá)到超出一行顯示省略號(hào)不僅僅是使用white-space:nowrap屬性，我們還可以使用以下屬性來(lái)達(dá)到效果，而且通過(guò) -webkit-line-clamp可以來(lái)設(shè)計(jì)幾行才出現(xiàn)省略號(hào)的情況。但由于存在兼容問(wèn)題建議移動(dòng)端使用

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

②代碼：

.item-content-wrap  .item-title {
    overflow: hidden;
 —  text-overflow: ellipsis;
 —  white-space: nowrap;
 +  display: -webkit-box;
 +  -webkit-line-clamp: 1;
 +  -webkit-box-orient: vertical; 
}
尊重原創(chuàng)，如需轉(zhuǎn)載請(qǐng)注明出處！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116225.html

相關(guān)文章

  • flex布局被子元素?fù)伍_，如何保持內(nèi)容不超出容器

    摘要：而且因?yàn)樵O(shè)置了會(huì)發(fā)現(xiàn)文字會(huì)將撐開，導(dǎo)致內(nèi)容超出了屏幕。嘗試取消父元素的，無(wú)效。因此猜測(cè)是布局的問(wèn)題，進(jìn)一步猜測(cè)省略符需要對(duì)父元素限定寬度。 移動(dòng)端里面，flex 布局很好用，它能夠根據(jù)設(shè)備寬度來(lái)自動(dòng)調(diào)整容器的寬度，但是最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題： 一個(gè)li里面設(shè)置了flex,flex: 0 0 33.333%,然后想讓子元素里面的文字超出flex定義寬度后自動(dòng)省略。 ...

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

  • 巧用flex布局實(shí)現(xiàn)左側(cè)文字溢出省略，右側(cè)文字自適應(yīng)。

    摘要：想要實(shí)現(xiàn)一個(gè)左側(cè)文字可以根據(jù)文字長(zhǎng)短自動(dòng)調(diào)整寬度，當(dāng)一行顯示不下時(shí)，不擠壓右側(cè)文字空間，左側(cè)文字溢出省略。設(shè)計(jì)需求總結(jié)左側(cè)寬度自動(dòng)增長(zhǎng)，右側(cè)寬度自動(dòng)增長(zhǎng)并且不可溢出省略。當(dāng)左側(cè)文字長(zhǎng)度超出的時(shí)候，左側(cè)文字溢出省略。 想要實(shí)現(xiàn)一個(gè)左側(cè)文字可以根據(jù)文字長(zhǎng)短自動(dòng)調(diào)整寬度，當(dāng)一行顯示不下時(shí)，不擠壓右側(cè)文字空間，左側(cè)文字溢出省略。同理當(dāng)右側(cè)文字變長(zhǎng)的時(shí)候，右側(cè)文字全顯示，左側(cè)文字被擠壓后溢出省略...

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

  • CSS處理文本過(guò)長(zhǎng)或超出部分（解說(shuō)一）

    摘要：在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用對(duì)其進(jìn)行處理。再補(bǔ)充一條，比如想讓內(nèi)容在第二行的時(shí)候，超出部分隱藏這個(gè)處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說(shuō)二 在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用css對(duì)其進(jìn)行處理。 下面的方法是我在實(shí)際工作中總結(jié)...

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

  • 移動(dòng)端樣式小技巧

    摘要：平時(shí)在移動(dòng)端開發(fā)拼頁(yè)面的過(guò)程中總會(huì)遇到一些問(wèn)題，主要是各手機(jī)樣式顯示效果不一致造成的。五左右寬度自適應(yīng)第四個(gè)小技巧結(jié)尾，圖中的布局實(shí)際上是分左右兩塊的，依照的需求，文案是要左對(duì)齊，數(shù)字是要右對(duì)齊的。 平時(shí)在移動(dòng)端開發(fā)拼頁(yè)面的過(guò)程中總會(huì)遇到一些問(wèn)題，主要是各手機(jī)webview樣式顯示效果不一致造成的。以下總結(jié)了一些常見坑和一些小技巧，希望對(duì)看官有所幫助！ 本文只針對(duì)兩大手機(jī)陣營(yíng) Andr...

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

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

0條評(píng)論

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