摘要：當然這里有個小技巧，正常而言，只對元素生效，如果我們的文案像是這樣包裹在標簽內(nèi)要使對生效，可以通過設(shè)定的來實現(xiàn)。

這兩天接觸到一個很有意思的 CSS 屬性 -- box-decoration-break。下面就一起去一探究竟。

因為 MDN 上關(guān)于這個屬性，沒有中文文檔，所以一直在想一個合理貼切的中文翻譯。直譯一下：

• box -- 盒，可以理解為元素盒模型
• decoration -- 裝飾，理解為元素樣式
• break -- 斷行，參考word-break ，理解為斷行時候的表現(xiàn)

那么，這個屬性可以先理解為，元素在發(fā)生斷行時其樣式的表現(xiàn)形式。

MDN 上英文釋意為：The box-decoration-break CSS property specifies how an elements fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 屬性規(guī)定了一個元素片段在發(fā)生折行/斷行時，應(yīng)該如何被渲染。

可選取值只有兩個：

{
    box-decoration-break: slice;   // 默認取值
    box-decoration-break: clone;
}

換行示例

這個屬性通常作用于內(nèi)聯(lián)元素。假設(shè)我們存在如下結(jié)構(gòu)，并且給它添加一個邊框：

ABCDEFGHIJKLMN

span {
    border: 2px solid #999;
}

嗯，效果如下，平平無奇：

好，接下來就是 break，我們把上面一行的文字斷行，樣式不變：

ABCD 
EFG 
 HI
 JKLMN

得到如下結(jié)果：

O，可以看到，文字換行的同時，邊框也隨之變化，頭尾兩行都有 3 邊邊框，中間兩行只有上下兩邊邊框。如果將 4 行合起來，可以拼成圖一，這個是正常的展示效果。

接下來，我們加上本文的主角 box-decoration-break: clone：

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

生效后，我們將會得到這樣的結(jié)果：

box-decoration-break: clone 使用小結(jié)

看到這里，我們已經(jīng)可以大概理解這個屬性的作用了：

使用了 box-decoration-break: clone 的內(nèi)聯(lián)元素，如果存在折行顯示，那么每一行都將擁有原本單行的所有完整樣式。

再看個例子加深下理解，存在如下結(jié)構(gòu)，其使用了 box-decoration-break: clone 前后兩種效果：

每一行 
樣式 
 都 
 保持
 完整獨立

CodePen Demo -- box-decoration-break

box-decoration-break: clone 生效樣式影響范圍

當然，使用了 box-decoration-break: clone 的元素并非對每一個樣式都會生效，只會作用于下列樣式：

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding
• Syntax

box-decoration-break: clone 實際應(yīng)用

接下來看看，有沒有什么靠譜的實際應(yīng)用場景。

box-decoration-break: clone 實現(xiàn)文本選中效果

會有這樣的場景，我們希望對一個多行文本中的特定一段文本進行著重展示。這個時候，我們可以通過 

 嵌套  ，對  包裹的文字進行一些特定的展示。

譬如我們有這樣一段文案：

The box-decoration-break CSS property specifies how an elements fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 

其中，我們將需要強調(diào)的內(nèi)容通過  標簽包裹起來，賦予特定樣式并且加上 box-decoration-break: clone，這樣，無論強調(diào)文案是否換行，每一處的強調(diào)背景都是一致的：

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

得到如下效果：

如果不加 box-decoration-break: clone 呢？那么如果存在換行，效果會大打折扣：

CodePen Demo -- text-decoration-break 文本選中效果

box-decoration-break 每行文字帶特定邊框

又會有這樣的場景，我們希望每一行文案都帶有特定的邊框樣式，像這樣：

怎么實現(xiàn)呢？也許可以每一行都是一個 

，每一行 

 設(shè)定上述樣式。但是如果文本內(nèi)容不確定，容器的寬度也不確定呢？

這種場景，使用 box-decoration-break 也非常便捷。當然這里有個小技巧，正常而言， box-decoration-break: clone 只對 inline 元素生效，如果我們的文案像是這樣包裹在 

 標簽內(nèi)：

The box-decoration-break CSS property specifies how an elements fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 

要使 box-decoration-break: clone 對 

 生效，可以通過設(shè)定 

 的 display: inline 來實現(xiàn)。如此一來，要實現(xiàn)上述效果，我們只需要：

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

無論文本內(nèi)容或者容器寬度如何變化，都能完美適配：

CodePen Demo -- box-decoration-break 每行文字帶特定邊框

box-decoration-break 結(jié)合過渡動畫

結(jié)合上面的內(nèi)容，我們還可以考慮將 box-decoration-break 與過渡效果或者動畫效果結(jié)合起來。

譬如，我們希望當我們 hover 文字內(nèi)容的時候，一些重點需要展示的文字段落能夠被強調(diào)展示，可能是這樣：

CodePen Demo -- box-decoration-break 過渡動畫

又或者是這樣：

CodePen Demo -- box-decoration-break 結(jié)合過渡動畫

你可以嘗試點進 Demo ，然后去掉 box-decoration-break: clone ，會發(fā)現(xiàn)效果大打折扣。

兼容性

額，按照慣例兼容性應(yīng)該都不太行。并且 MDN 也給出了這樣的提示：

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use，其實還好，除了 IE 系列全軍覆沒，所以可以考慮應(yīng)用在移動端。即便這個屬性不兼容，降級展示對頁面不會造成什么影響：

另外，本文中，給出的代碼都是 box-decoration-break: clone ，CodePen 自帶了 autoprefixer 實際中可能需要寫成：

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

國內(nèi)看到了大漠老師和張鑫旭大大都已經(jīng)寫過這個屬性，大家可以對比著看看，加深理解：

• CSS/CSS3 box-decoration-break屬性簡介
• 初探box-decoration-break

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。

好了，本文到此結(jié)束，希望對你有幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。