溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“CSS中flex-basis文本溢出問(wèn)題如何解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
1. flex 家族
flex 里有很多的屬性，我們經(jīng)常用到的就是如下操作：
.container {
display: flex;
}
.container > .left {
flex: 1;
}
.container > .right {
flex: 1;
}這樣可以很方便的實(shí)現(xiàn)一個(gè)左右等分的布局。
我們來(lái)看一個(gè)引起問(wèn)題的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
padding: 5px;
border: 1px solid #ccc;
}
.no-effect {
align-items: center;
margin: 100px;
width: 200px;
color: #999;
}
.no-effect > div:first-of-type {
margin-right: 10px;
}
p {
color: red;
}
.no-wrap {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div style="display: flex;" class="no-effect">
<div style="flex: 0 0 80px">我比較短</div>
<div style="flex: auto">
<p class="no-wrap">我很長(zhǎng)，不是開(kāi)玩笑的，可以長(zhǎng)到?jīng)]邊</p>
</div>
</div>
</body>
</html>我們想要的效果：
但實(shí)際的效果：
為什么會(huì)出現(xiàn)這個(gè)情況？
2. flex-basis 從中作梗
flex: auto 實(shí)際上是三個(gè)屬性的集合：
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
flex-grow 表示放大比例， flex-shrink 表示收縮比例， flex-basis 表示分配多余空間前，項(xiàng)目占據(jù)的主軸空間。
我們左邊 div 不放大，不縮小，固定 80px 寬度；右邊 div 自動(dòng)鋪滿剩余寬度也就是 200px - 80px = 120px，實(shí)際效果卻遠(yuǎn)遠(yuǎn)超出了 120px，這是因?yàn)?flex-basis 為 auto 時(shí)的計(jì)算導(dǎo)致的。
我們來(lái)看看 flex-basis: auto 的歷史：
最初的時(shí)候 flex-basis 是由 width/height 決定的；
后來(lái)有個(gè)bug 1032922 ，flex-basis 的計(jì)算就變成了沿主軸的寬度決定了；
后來(lái)又出現(xiàn)了一個(gè) bug 1093316 ，又變回了由 width/height 決定且出現(xiàn)了一個(gè)新的概念 content 來(lái)自動(dòng)計(jì)算寬/高；
所以當(dāng)我們沒(méi)有給 flex-basis 元素設(shè)置 width 時(shí)， flex-basis: auto 由內(nèi)部的 content 決定寬度，且受 max/min-width 限制。
如此一來(lái)，在內(nèi)部 content 自由的情況下，那么 flex-basis 元素的寬度就看 max/min-width 了。
max-width 的默認(rèn)值是 none ，而 min-width 的默認(rèn)值一般是 0 ，而此處卻是 auto ，這也是出現(xiàn)“異?！钡脑蛄?。
flex-basis 元素：
普通元素：
3. 解決方式
知道原因后，那我們就可以對(duì)癥下藥了。
首先自然是設(shè)置 width 屬性即可了，只要 width 小于剩余空間即可，一般設(shè)置為 width: 0; 這樣可百分之百確定小于剩余空間；
不設(shè)置 width 但用 min-width 來(lái)限制也是一樣的，既然 flex 項(xiàng) 的 min-width:auto ，那我們也設(shè)置一個(gè)小于剩余空間的值，一般也是 min-width: 0;
設(shè)置 overflow:hidden 來(lái)限制溢出效果也是一致的。
介紹了三種解決方式，再來(lái)聊聊前兩種為什么可以解決的原因吧。
第一種很簡(jiǎn)單，width 設(shè)置為 0，但是 flex-basis 會(huì)讓元素填滿剩余空間，所以就會(huì)鋪滿，由于 P 元素有不換行顯示省略號(hào)，會(huì)正常顯示。
那么第二種呢？
第二種的情況比較復(fù)雜，當(dāng)我們?cè)O(shè)置了 min-width 不為 auto 的值后，這里會(huì)用到 shrink-to-fit 算法，這個(gè)算法的計(jì)算機(jī)制如下：
min(max(preferred minimum width, available width), preferred width)
翻譯成人話就是：
preferred minimum width：最小寬度
available width：可用寬度，也就是content box的寬度
preferred width：首選寬度，除了明確換行外的不換行時(shí)的寬度
shrink-to-fit 的寬度 = min ( max (最小寬度, 可用寬度) , 首選寬度)
那么來(lái)計(jì)算一下：
最小寬度：0
可用寬度：272px
首選寬度：200 - 一些七七八八的值剩余部分(98px)
由計(jì)算可得：
max(0, 272) = 272
min(272, 98) = 98
所以最終寬度是剩余部分 98px，當(dāng)我們手動(dòng)設(shè)置 min-width: 110px 時(shí)就可以看到超過(guò)溢出去了。
“CSS中flex-basis文本溢出問(wèn)題如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼