資訊專欄INFORMATION COLUMN
摘要：后兩個屬性可選，該屬性有兩個快捷值和。屬性定義了項目的縮小壓縮比例，默認(rèn)為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。當(dāng)我們設(shè)置，項目控件由于不能計算多余的空間導(dǎo)致無法收縮了。
寫在最前：當(dāng)flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個方案任意選擇！
一、場景： 二、簡化場景： 三、頁面布局：.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的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選，
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
.item {
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}
flex-grow屬性定義項目的放大（拉伸）比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項目的縮小（壓縮）比例，默認(rèn)為1，即如果空間不足，該項目將縮小。
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
當(dāng)我們設(shè)置white-space:nowrap，項目控件由于不能計算多余的空間導(dǎ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的父級設(shè)置寬度，通過 min-width、max-width、width屬性都可以設(shè)置，但因為文字的長度不定設(shè)置width或者max-width都有可能遮住有效區(qū)域，所以建議使用min-width: 0比較符合；除此之外通過overflow: hidden使得父元素變?yōu)锽FC也能達(dá)到同樣的效果
min-width: 0; min-width: 300px; max-width: 300px; width: 300px; overflow: hidden;方案2：
①原理：
其實導(dǎo)致這種情況發(fā)生的不是父級item-content-wrap的flex，而是爺級g-list-item的flex，如果我們布局是上下結(jié)構(gòu)，可以去掉爺級的display: flex達(dá)到相應(yīng)效果
②代碼：
.g-list-item {
position: relative;
— display: flex;
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
}
方案3：
①原理：
利用樣式達(dá)到超出一行顯示省略號不僅僅是使用white-space:nowrap屬性，我們還可以使用以下屬性來達(dá)到效果，而且通過 -webkit-line-clamp可以來設(shè)計幾行才出現(xiàn)省略號的情況。但由于存在兼容問題建議移動端使用
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)載請注明出處！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116225.html
摘要：而且因為設(shè)置了會發(fā)現(xiàn)文字會將撐開，導(dǎo)致內(nèi)容超出了屏幕。嘗試取消父元素的，無效。因此猜測是布局的問題，進(jìn)一步猜測省略符需要對父元素限定寬度。 移動端里面，flex 布局很好用，它能夠根據(jù)設(shè)備寬度來自動調(diào)整容器的寬度，但是最近在做項目的時候發(fā)現(xiàn)一個問題： 一個li里面設(shè)置了flex,flex: 0 0 33.333%,然后想讓子元素里面的文字超出flex定義寬度后自動省略。 ...
摘要：想要實現(xiàn)一個左側(cè)文字可以根據(jù)文字長短自動調(diào)整寬度，當(dāng)一行顯示不下時，不擠壓右側(cè)文字空間，左側(cè)文字溢出省略。設(shè)計需求總結(jié)左側(cè)寬度自動增長，右側(cè)寬度自動增長并且不可溢出省略。當(dāng)左側(cè)文字長度超出的時候，左側(cè)文字溢出省略。 想要實現(xiàn)一個左側(cè)文字可以根據(jù)文字長短自動調(diào)整寬度，當(dāng)一行顯示不下時，不擠壓右側(cè)文字空間，左側(cè)文字溢出省略。同理當(dāng)右側(cè)文字變長的時候，右側(cè)文字全顯示，左側(cè)文字被擠壓后溢出省略...
摘要：在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用對其進(jìn)行處理。再補(bǔ)充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說二 在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用css對其進(jìn)行處理。 下面的方法是我在實際工作中總結(jié)...
閱讀 1695·2021-11-24 09:39
閱讀 2469·2021-11-18 10:07
閱讀 3657·2021-08-31 09:40
閱讀 3317·2019-08-30 15:44
閱讀 2628·2019-08-30 12:50
閱讀 3649·2019-08-26 17:04
閱讀 1430·2019-08-26 13:49
閱讀 1262·2019-08-23 18:05
