flex佈局遇到white-space:nowrap怎麼超出一行顯示省略號

---

寫在最前：當flex遇到white-space:nowrap，你知道怎麼破局嗎？切圖帶你分析原理，三個方案任意選擇！

1、場景：

2、簡化場景：

3、頁面佈局：

<ul class="g-list">
      <li class="g-list-item">
        <div class="item-content-wrap">
          <div class="item-title"> 英短貫徹愛與真實的邪惡，可愛又迷人的反派角色！</div>
        </div>
      </li>
</ul>

4、問題樣式：

.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;
}

5、解決方法：

方案1：

①原理：
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選，
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-grow屬性定義項目的放大（拉伸）比例，默認爲0，即若是存在剩餘空間，也不放大。
flex-shrink屬性定義了項目的縮小（壓縮）比例，默認爲1，即若是空間不足，該項目將縮小。
flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

當咱們設置white-space:nowrap，項目控件因爲不能計算多餘的空間致使沒法收縮了。此時咱們設置固定尺寸就能夠收縮了

②代碼：

.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的父級設置寬度，經過 min-width、max-width、width屬性均可以設置，但由於文字的長度不定設置width或者max-width都有可能遮住有效區域，因此建議使用min-width: 0比較符合；除此以外經過overflow: hidden使得父元素變爲BFC也能達到一樣的效果

min-width: 0;
 min-width: 300px;
 max-width: 300px;
 width: 300px;
 overflow: hidden;

方案2：

①原理：
其實致使這種狀況發生的不是父級item-content-wrap的flex，而是爺級g-list-item的flex，若是咱們佈局是上下結構，能夠去掉爺級的display: flex達到相應效果
②代碼：

.g-list-item {
    position: relative;
  — display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
}

方案3：

①原理：
利用樣式達到超出一行顯示省略號不單單是使用white-space:nowrap屬性，咱們還可使用如下屬性來達到效果，並且經過 -webkit-line-clamp能夠來設計幾行纔出現省略號的狀況。但因爲存在兼容問題建議移動端使用

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; 
}

尊重原創，如需轉載請註明出處！