欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS flex-basis 文本溢出問題的解決

  發(fā)布時間：2019-12-04 15:46:57   作者：眼已望穿   我要評論
這篇文章主要介紹了CSS flex-basis 文本溢出問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

不值一提的 flex-basis ，卻給文本溢出添加省略號這個小小的功能帶來很多了麻煩。下面來演示一下。

1. flex 家族

flex 里有很多的屬性，我們經(jīng)常用到的就是如下操作：

.container {
  display: flex;
}

.container > .left {
  flex: 1;
}

.container > .right {
  flex: 1;
}

這樣可以很方便的實現(xià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">我很長，不是開玩笑的，可以長到?jīng)]邊</p>
      </div>
    </div>
  </body>
</html>

我們想要的效果：

但實際的效果：

為什么會出現(xiàn)這個情況？

2. flex-basis 從中作梗

flex: auto 實際上是三個屬性的集合：

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

flex-grow 表示放大比例， flex-shrink 表示收縮比例， flex-basis 表示分配多余空間前，項目占據(jù)的主軸空間。

我們左邊 div 不放大，不縮小，固定 80px 寬度；右邊 div 自動鋪滿剩余寬度也就是 200px - 80px = 120px，實際效果卻遠遠超出了 120px，這是因為 flex-basis 為 auto 時的計算導(dǎo)致的。

我們來看看 flex-basis: auto 的歷史：

  • 最初的時候 flex-basis 是由 width/height 決定的；
  • 后來有個bug 1032922 ，flex-basis 的計算就變成了沿主軸的寬度決定了；
  • 后來又出現(xiàn)了一個 bug 1093316 ，又變回了由 width/height 決定且出現(xiàn)了一個新的概念 content 來自動計算寬/高；

所以當(dāng)我們沒有給 flex-basis 元素設(shè)置 width 時， 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. 解決方式

知道原因后，那我們就可以對癥下藥了。

  • 首先自然是設(shè)置 width 屬性即可了，只要 width 小于剩余空間即可，一般設(shè)置為 width: 0; 這樣可百分之百確定小于剩余空間；
  • 不設(shè)置 width 但用 min-width 來限制也是一樣的，既然 flex 項 的 min-width:auto ，那我們也設(shè)置一個小于剩余空間的值，一般也是 min-width: 0;
  • 設(shè)置 overflow:hidden 來限制溢出效果也是一致的。

介紹了三種解決方式，再來聊聊前兩種為什么可以解決的原因吧。

第一種很簡單，width 設(shè)置為 0，但是 flex-basis 會讓元素填滿剩余空間，所以就會鋪滿，由于 P 元素有不換行顯示省略號，會正常顯示。

那么第二種呢？

第二種的情況比較復(fù)雜，當(dāng)我們設(shè)置了 min-width 不為 auto 的值后，這里會用到 shrink-to-fit 算法，這個算法的計算機制如下：

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

翻譯成人話就是：

  • preferred minimum width：最小寬度
  • available width：可用寬度，也就是content box的寬度
  • preferred width：首選寬度，除了明確換行外的不換行時的寬度

shrink-to-fit 的寬度 = min ( max (最小寬度, 可用寬度) , 首選寬度)

那么來計算一下：

  • 最小寬度：0
  • 可用寬度：272px
  • 首選寬度：200 - 一些七七八八的值剩余部分(98px)

由計算可得：

max(0, 272) = 272

min(272, 98) = 98

所以最終寬度是剩余部分 98px，當(dāng)我們手動設(shè)置 min-width: 110px 時就可以看到超過溢出去了。

 

總結(jié)

css 并沒有我們想象的那么信口拈來，還有有規(guī)律可循的，不過這個尋的過程卻是有點復(fù)雜……遇到不解的可以多看看它是怎么來的，要干嘛，就能明白解決它的思路了。

相關(guān)文章

最新評論