讓 overflow-wrap 失效的 flex-wrap

注： word-wrap 屬性原本屬于微軟的一個私有屬性，在 CSS3 現(xiàn)在的文本規(guī)范草案中已經(jīng)被重名為 overflow-wrap 。 word-wrap 現(xiàn)在被當(dāng)作 overflow-wrap 的 “別名”。 穩(wěn)定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。

連續(xù)長單詞換行問題

overflow-wrap 是用來說明當(dāng)一個不能被分開的字符串太長而不能填充其包裹盒子時，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。

默認(rèn)情況 overflow-wrap: normal; 下是不換行的：

當(dāng) overflow-wrap 取值為 break-word 長文本既可以截斷了：

當(dāng) overflow-wrap 還有個 anywhere 值，不在今天探討內(nèi)容。

CSS3 幾個新的寬度成員

flex nowrap 的作用規(guī)則有點復(fù)雜，并不是簡單的不換行展示，需要用到 min-content 知識，關(guān)于這個內(nèi)容參考，張鑫旭老師的這篇文章：理解CSS3 max/min-content及fit-content等width值。

解釋下最小寬度 min-content：

<div style="background-color: greenyellow;">
      <div style="width: 100px;height: 20px;margin-bottom: 50px;background-color: #f2f;">1</div>
      <div style="width: 200px;height: 20px;margin-bottom: 50px;background-color: #f2f;">2</div>
      <div style="width: 300px;height: 20px;margin-bottom: 50px;background-color: #f2f;">3</div>
      <div style="width: 400px;height: 20px;margin-bottom: 50px;background-color: #f2f;">4</div>
    </div>

四個盒子豎排排列，在標(biāo)準(zhǔn)文檔流子盒子撐開了父盒子，寬度自動填充，于是 greenyellow 沾滿了屏幕。

當(dāng)更改寬度為 min-content：

<div style="width: min-content; background-color: greenyellow;">
      <div style="width: 100px;height: 20px;margin-bottom: 50px;background-color: #f2f;">1</div>
      <div style="width: 200px;height: 20px;margin-bottom: 50px;background-color: #f2f;">2</div>
      <div style="width: 300px;height: 20px;margin-bottom: 50px;background-color: #f2f;">3</div>
      <div style="width: 400px;height: 20px;margin-bottom: 50px;background-color: #f2f;">4</div>
    </div>

greenyellow 變成了 400px，收縮為子元素最大的一個寬度，這就是 min-content 內(nèi)部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。

flex-wrap: nowrap;

• flex-wrap: nowrap; 默認(rèn)值，表示單行顯示，不換行。于是很容易出現(xiàn)寬度溢出的場景，其渲染表現(xiàn)比較復(fù)雜，需要對CSS3寬度有一定了解，可以閱讀“理解CSS3 max/min-content及fit-content等width值”這篇文章。具體表現(xiàn)如下（以水平布局舉例）：

  • flex子項最小內(nèi)容寬度min-content之和大于flex容器寬度，則內(nèi)容溢出，表現(xiàn)和white-space:nowrap類似。

  • 如果flex子項最小內(nèi)容寬度min-content之和小于flex容器寬度，則：

    • flex子項默認(rèn)的fit-content寬度之和大于flex容器寬度，則flex子項寬度收縮，正好填滿flex容器，內(nèi)容不溢出。
    • flex子項默認(rèn)的fit-content寬度之和小于flex容器寬度，則flex子項以fit-content寬度正常顯示，內(nèi)容不溢出。

上面摘自張鑫旭老師的文章：寫給自己看的display: flex布局教程，作為定理放在這，下面解釋現(xiàn)象會引用到。

正常盒子長文本換行顯示

在線演示代碼可直接訪問：https://codepen.io/lehollandaisvolant/pen/MvOYxp

代碼如下：

<style>
  .parent {
    width: 200px;
    overflow-wrap: break-word;
    background: gold;
    border: 1px solid transparent;
  }
  .parent div {
    background: silver;
    margin: 5px;
  }
</style>
<h2>Example without <code>display:flex</code>:</h2>
<div class="parent">
  <div>Sidebar with fixed with</div>
  <div>this is a flexible box with a really loooooooooooooooooooooooooooooooooooong word inside.</div>
</div>

overflow-wrap: break-word; 運(yùn)行良好完全沒問題。

flex 布局長文本換行顯示異常

代碼異常簡單：

<style>
  .parent {
    width: 200px;
    overflow-wrap: break-word;
    background: gold;
    border: 1px solid transparent;
  }
  .parent div {
    background: silver;
    margin: 5px;
  }
  #parent-flex {
    display: flex;
  }
</style>
<h2>Example with <code>display:flex</code>:</h2>
<div class="parent" id="parent-flex">
  <div>Sidebar with fixed with</div>
  <div>this is a flexible box with a really loooooooooooooooooooooooooooooooooooong word inside.</div>
</div>

分析下形成的原因，flex 布局下子項的寬為 width: min-content;，所以各自子項的寬就是各自盒子里面最長的那個單詞，因為我們沒有直接設(shè)置子項的 min-content，Sidebar+ loooooooooooooooooooooooooooooooooooong 兩個單詞的長度占用的寬度加起來，去和 flex 容器盒子寬度比較，符合上面講到的flex子項最小內(nèi)容寬度min-content之和大于flex容器寬度，則內(nèi)容溢出，表現(xiàn)和white-space:nowrap類似。，自然內(nèi)容溢出。

子項 loooooooooooooooooooooooooooooooooooong 的長度等于子項盒子的寬度，這種情況下 文本沒溢出 overflow-wrap: break-word; 就完全沒起作用了，如果想讓 overflow-wrap: break-word; 起作用就得把子項的寬度變窄。

怎么變窄呢？根據(jù)上面提到的：

如果flex子項最小內(nèi)容寬度min-content之和小于flex容器寬度，則：

• flex子項默認(rèn)的fit-content寬度之和大于flex容器寬度，則flex子項寬度收縮，正好填滿flex容器，內(nèi)容不溢出。

只需要保證子項的 min-content 小于 flex 容器寬度就行了，簡單的添加一段 CSS 代碼：

#parent-flex > div{
    min-width: 0;
}

我們設(shè)置了 min-width ，兩個子項的 min-content 現(xiàn)在為零，小于 flex 容器寬度，子項里面的 fit-content寬度之和大于flex容器寬度，此時 flex 子項寬度收縮，正好填滿 flex 容器，內(nèi)容不溢出。

結(jié)果是子項被縮短了，長文本能溢出，overflow-wrap: break-word; 也就起作用了。

張鑫旭老師的文章：寫給自己看的display: flex布局教程，講解 nowrap 的時候有一個演示例子可以看看，加強(qiáng)理解。

總結(jié)

當(dāng)長文本溢出，想要進(jìn)行換行展示，我們想到了 overflow-wrap: break-word;，但結(jié)合 flex 布局使用的時候，發(fā)現(xiàn) overflow-wrap 沒有生效，原來是因為 flex-wrap: nowrap; 導(dǎo)致的，因為子項采用 min-content 來進(jìn)行撐寬的，導(dǎo)致子項最長的文本和子項一樣寬，沒有發(fā)生溢出現(xiàn)象，解決辦法就是縮小子項的寬度，產(chǎn)生溢出現(xiàn)象，于是通過 min-width=0 來實現(xiàn)。