CSS flex-basis 文本溢出問題的解決
我要評(píng)論不值一提的 flex-basis ，卻給文本溢出添加省略號(hào)這個(gè)小小的功能帶來很多了麻煩。下面來演示一下。
1. flex 家族
flex 里有很多的屬性，我們經(jīng)常用到的就是如下操作：
.container {
display: flex;
}
.container > .left {
flex: 1;
}
.container > .right {
flex: 1;
}
這樣可以很方便的實(shí)現(xiàn)一個(gè)左右等分的布局。
我們來看一個(gè)引起問題的例子：
<!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)，不是開玩笑的，可以長(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)致的。
我們來看看 flex-basis: auto 的歷史：
- 最初的時(shí)候 flex-basis 是由 width/height 決定的；
- 后來有個(gè)bug 1032922 ，flex-basis 的計(jì)算就變成了沿主軸的寬度決定了；
- 后來又出現(xiàn)了一個(gè) bug 1093316 ，又變回了由 width/height 決定且出現(xiàn)了一個(gè)新的概念
content來自動(dòng)計(jì)算寬/高；
所以當(dāng)我們沒有給 flex-basis 元素設(shè)置 width 時(shí)， flex-basis: auto 由內(nèi)部的 content 決定寬度，且受 max/min-width 限制。
如此一來，在內(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來限制也是一樣的，既然 flex 項(xiàng) 的min-width:auto，那我們也設(shè)置一個(gè)小于剩余空間的值，一般也是min-width: 0; - 設(shè)置
overflow:hidden來限制溢出效果也是一致的。
介紹了三種解決方式，再來聊聊前兩種為什么可以解決的原因吧。
第一種很簡(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 (最小寬度, 可用寬度) , 首選寬度)
那么來計(jì)算一下：
- 最小寬度：0
- 可用寬度：272px
- 首選寬度：200 - 一些七七八八的值剩余部分(98px)
由計(jì)算可得：
max(0, 272) = 272
min(272, 98) = 98
所以最終寬度是剩余部分 98px，當(dāng)我們手動(dòng)設(shè)置 min-width: 110px 時(shí)就可以看到超過溢出去了。
總結(jié)
css 并沒有我們想象的那么信口拈來，還有有規(guī)律可循的，不過這個(gè)尋的過程卻是有點(diǎn)復(fù)雜……遇到不解的可以多看看它是怎么來的，要干嘛，就能明白解決它的思路了。
相關(guān)文章
css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例
這篇文章主要介紹了css多行文本溢出時(shí)出現(xiàn)省略號(hào)的示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-13
本篇文章主要介紹了純CSS定制文本省略的方法大全，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-16CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)的實(shí)現(xiàn)方法
如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽2018-03-01css實(shí)現(xiàn)文本溢出顯示省略號(hào)
這篇文章主要介紹了css實(shí)現(xiàn)文本溢出顯示省略號(hào)的方法和示例分享，推薦給大家。2014-12-23CSS實(shí)現(xiàn)限制字?jǐn)?shù)功能當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
這篇文章主要介紹了CSS實(shí)現(xiàn)限制字?jǐn)?shù)功能當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記，需要的朋友可以參考下2014-08-20用css截取字符實(shí)現(xiàn)文字自動(dòng)截?cái)嚯[藏溢出文本
這篇文章主要介紹了用css截取字符實(shí)現(xiàn)文字自動(dòng)截?cái)嚯[藏溢出文本，需要的朋友可以參考下2014-05-19css實(shí)現(xiàn)li中文本超出行寬自動(dòng)隱藏
li中的文本超出行寬自動(dòng)隱藏，在一些新聞?lì)惖牧斜響?yīng)用中還是比較實(shí)用的，具體的實(shí)現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-29- 單行文本的控制，以前是由程序員完成的，2008-10-17
