前言

一個(gè)小姑娘問了我關(guān)于flex文本溢出的問題，事后我覺得這個(gè)問題還挺有意思的，所以簡單的研究下和大家分享分享。

問題

用一個(gè)簡化的css和html為例

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .left {
    width: 100px;
    height: 100%;
    background: red;
  }
  .right {
    flex: auto;
    height: 100%;
    background: blue;
    color: #fff;
  }
  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

<div class="box">
  <div class="left">123</div>
  <div class="right">
    <p class="text">
      這是一段很長長長長長長長長長長長長長長長長長長文字，這是一段很長長長長長長長長長長長長長長長長長長文字
    </p>
  </div>
</div>
<div class="box" style="background: green">正常的box</div>

上面是一個(gè)flex容器，包括著兩個(gè)容器，其中右邊的容器中我們希望的應(yīng)該是正常展示，且文本顯示省略號(hào)，但總是事與愿違。頁面展示如下，左邊紅色區(qū)域被壓縮，藍(lán)色的區(qū)域拉伸了，并將父容器撐開。

那么，我們?cè)撊绾谓鉀Q怎么這個(gè)問題呢？

解決方法

方法有三，如下

• 藍(lán)色容器設(shè)置 overflow: hidden
• 藍(lán)色容器設(shè)置 width: 0
• 藍(lán)色容器設(shè)置 min-width: 0

第一種 overflow超出截?cái)啾容^好理解。我們看看剩下的兩種。

法二 width

第二種，首先看下flex屬性

<!-- 縮寫 -->
flex: auto; 

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

<!--默認(rèn)值為-->
flex: 0 1 auto;

flex: auto是flex: 0 1 auto的縮寫

其中

• flex-grow：表示放大比例
• flex-shrink：表示縮小比例
• flex-basis：作用于子元素的主軸上的寬度屬性，并且優(yōu)先級(jí)比默認(rèn)的寬/高要高。 這個(gè)屬性決定CSS如何給可伸縮項(xiàng)在容器中分配初始大小.

上面作妖的屬性就是flex-basis。flex-basis的值有 content | \<width\>

flex-basis: 會(huì)檢索項(xiàng)目的width 或 height 值作為 flex-basis 的值。如果 width 或 height 值為 auto，則 flex-basis 設(shè)置為 content，也就是基于 flex 的元素的內(nèi)容自動(dòng)調(diào)整大小。

注意： flex-basis設(shè)置 0 和 0% 上有所區(qū)別, 如果flex-basis的值為百分?jǐn)?shù)，且它flex容器的尺寸沒有被顯式設(shè)置，此時(shí)flex-basis的值會(huì)被解析為content, 值會(huì)根據(jù)flex子項(xiàng)的內(nèi)容（指flex子項(xiàng)的子元素尺寸）來計(jì)算實(shí)際尺寸，多數(shù)情況下效果與 max-content 值一致，就是說flex子項(xiàng)的子元素有多長其主軸初始值就有多長。

這里藍(lán)色容器的flex-basis為默認(rèn)值0項(xiàng)目總寬度小于容器寬度，計(jì)算如下：

項(xiàng)目總寬度100px + 0px = 100px

待分配寬度400px - 100px = 300px

放大比例0 + 1 = 1 , 這是項(xiàng)目的flex-grow之和

每個(gè)項(xiàng)目得到自身的grow/總的grow之和比例的剩余空間。

紅色容器得到0/1 * 300px = 0，最終寬度100px + 0px = 100px

藍(lán)色容器得到 1/1 * 300px = 300px，最終寬度300px

將藍(lán)色容器的寬度設(shè)為0，驗(yàn)證下我們的結(jié)果，結(jié)果如下，解決成功。

法三 min-width

一般情況下 min-width 屬性默認(rèn)值是 0 ，但是 Flexbox 容器中的 flex 項(xiàng)的 min-width 屬性默認(rèn)值是 auto ，這樣能為 Flexbox 布局指明更合理的默認(rèn)表現(xiàn)。將min-width設(shè)置成0，width未設(shè)置默認(rèn)值為auto。這個(gè)時(shí)候會(huì)使用shrink-to-fit算法去計(jì)算寬度(文獻(xiàn)3中說明flexbox中也會(huì)使用到該算法), 算法如下：

width = min(max(preferred minimum width, available width), preferred width)

其中

• 最小寬度（preferred minimum width）也就是min-width
• 可用寬度（available width） ，這個(gè)寬度為包含塊減去margin、border、padding以及所有相關(guān)滾動(dòng)條的寬度。
• 發(fā)生明確的換行外不發(fā)生換行的時(shí) 首選寬度（preferred width） 即content-box的寬度

那么計(jì)算如下: (816是當(dāng)時(shí)瀏覽器獲取的寬度)

min(max(0, 400px - 100px), 816px) = 300px

所以，設(shè)置最小寬度也能解決我們的問題。

flex再算一題

html的內(nèi)容如下，我們需要計(jì)算左右兩個(gè)容器的寬度。

<style>
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .item-1 {
    background: red;
    width: 200px;
    flex-shrink: 2;
  }
  .item-2 {
    background: blue;
    width: 300px;
    flex-shrink: 3;
  }
</style>
<div class="box">
  <div class="item-1">設(shè)置200px，實(shí)際169.23</div>
  <div class="item-2">設(shè)置300px，實(shí)際230.77</div>
</div>

開始計(jì)算，此時(shí)項(xiàng)目總寬度超過父容器時(shí)，這個(gè)時(shí)候需要使用flex-shrink計(jì)算

• 先要去計(jì)算項(xiàng)目的虛擬總寬度Total = 各項(xiàng)目flex-basic * flex-strink 之和，這里左右項(xiàng)目都設(shè)置了寬度，所以flex-basis=width
• 再計(jì)算單個(gè)項(xiàng)目的占比P = flex * flex-strink / Total
• 最后計(jì)算項(xiàng)目應(yīng)該減去的大小 = 真實(shí)超出部分 * P

Total = 200 * 2 + 300 * 3 = 1300

P1 = 200 * (2 / VS)

P2 = 300 * (3 / VS)

最終得出：

item-1的寬度為：200 - (500 - 400) * P1 = 169.23px

item-2 的寬度為：300 - (500 - 400) * P2 = 230.77px

參考文獻(xiàn)

• 【flex-basic】
• 【shrink-to-fit算法】 
• 【flex初始大小】
• 【flex-更多計(jì)算案例】 

到此這篇關(guān)于如何解決flex文本溢出問題小結(jié)的文章就介紹到這了,更多相關(guān)flex文本溢出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論