一、先了解下overflow-wrap屬性

cssoverflow-wrap屬性其實就是以前的word-wrap屬性，MDN現在直接把word-wrap的文件頁跳轉到overflow-wrap屬性的文件頁了。

由於overflow-wrap屬性IE瀏覽器不支援，而其他現代瀏覽器依然支援老的word-wrap屬性語法，因此，沒有任何理由使用overflow-wrap屬性。

直到有一天overflow-wrap屬性突然支援了一個新的屬性值anywhere，overflow-wrap屬性就有了使用的理由了。

overflow-wrap屬性的正式語法如下：

overflow-wrap: normal | break-word | anywhere
 

二、anywhere有什麼用

在展開技術屬性值anywhere的作用之前，先給大家科普一個概念，關於“硬換行”和“軟換行”。

硬換行在文字的換行點處插入了實際換行符，而軟換行的文字實際上仍在同一行，但看起來它被分成了幾行，例如word-break:break-all讓長英文單詞就屬於軟換行。

anywhere和break-word的異同

在正常狀態下，anywhere和break-word的表現是一樣的，即如果行中沒有其他可接受的斷點，則可以在任何點斷開原本不可斷開的字串（如長單詞或URL），並且在斷點處不插入連字元。

用人話解釋就是連續的英文字元如果可以不用斷就不斷，如果實在不行，就斷開，因此相比break-all可能會留白。如下圖所示：

具體可參見這篇文章：“word-break:break-all和word-wrap:break-word的區別”。

下面講下不同支援，anywhere和break-word的不同之處在於，在overflow-wrap:anywhere計算最小內容尺寸的時候會考慮軟換行，而overflow-wrap:break-word不會考慮軟換行。

例如下面這個例子：

<p class="anywhere">I'm zhangxinxu.</p>
<p class="break-word">I'm zhangxinxu.</p>

p {
    display: inline-block;
    width: min-content;
    padding: 10px;
    border: solid deepskyblue;
    vertical-align: top;
}
.anywhere {
    overflow-wrap: anywhere;  
}
.break-word {
    overflow-wrap: break-word;
}
 

結果在Chrome瀏覽器下的效果就像下圖這樣：

可以看到，應用了overflow-wrap:anywhere宣告的元素的最小寬度是把每一個英文單詞都破開後的寬度，而應用了overflow-wrap:break-word宣告的元素還是按照預設的最小寬度規則進行計算。

有此可見，overflow-wrap:anywhere就像是overflow-wrap:break-word和word-break:break-all宣告的混合體，主要用在彈性佈局中，即元素尺寸足夠的時候單詞儘量完成顯示，不隨便中斷，如果尺寸不夠，那就能斷則斷。

https://www.houdianzi.com/ vi設計公司

三、相容性和結語

overflow-wrap:anywhere宣告目前相容性還不算樂觀，目前（2020年3月）Safari瀏覽器還不支援，Chrome瀏覽器也是剛剛支援，具體資訊參見表：

因此目前還不適合在實際專案中使用，大家瞭解即可。

而且，常規的文字排版大家也不會用到這個屬性，就算知道這個屬性值，也不會想到使用。

註定是一個日後被人遺忘的css特性。

就說這麼多，帶大家簡單瞭解一個新特性。

本文為原創文章，歡迎分享，勿全文轉載，如果實在喜歡，可收藏，永不過期，且會及時更新知識點及修正錯誤，閱讀體驗也更好。