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

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

因?yàn)?nbsp;MDN 上關(guān)于這個(gè)屬性，沒(méi)有中文文檔，所以一直在想一個(gè)合理貼切的中文翻譯。直譯一下：

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

那么，這個(gè)屬性可以先理解為，元素在發(fā)生斷行時(shí)其樣式的表現(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ī)定了一個(gè)元素片段在發(fā)生折行/斷行時(shí)，應(yīng)該如何被渲染。

可選取值只有兩個(gè)：

{
    box-decoration-break: slice;   // 默認(rèn)取值
    box-decoration-break: clone;
}

換行示例

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

ABCDEFGHIJKLMN

span {
    border: 2px solid #999;
}

嗯，效果如下，平平無(wú)奇：

好，接下來(lái)就是 break，我們把上面一行的文字?jǐn)嘈?，樣式不變?/span>

ABCD 
EFG 
 HI
 JKLMN

得到如下結(jié)果：

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

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

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

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

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

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

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

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

每一行 
樣式 
 都 
 保持
 完整獨(dú)立

CodePen Demo -- box-decoration-break

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

當(dāng)然，使用了 box-decoration-break: clone 的元素并非對(duì)每一個(gè)樣式都會(huì)生效，只會(huì)作用于下列樣式：

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

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

接下來(lái)看看，有沒(méi)有什么靠譜的實(shí)際應(yīng)用場(chǎng)景。

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

會(huì)有這樣的場(chǎng)景，我們希望對(duì)一個(gè)多行文本中的特定一段文本進(jìn)行著重展示。這個(gè)時(shí)候，我們可以通過(guò) 

 嵌套  ，對(duì)  包裹的文字進(jì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. 

其中，我們將需要強(qiáng)調(diào)的內(nèi)容通過(guò)  標(biāo)簽包裹起來(lái)，賦予特定樣式并且加上 box-decoration-break: clone，這樣，無(wú)論強(qiáng)調(diào)文案是否換行，每一處的強(qiáng)調(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 呢？那么如果存在換行，效果會(huì)大打折扣：

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

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

又會(huì)有這樣的場(chǎng)景，我們希望每一行文案都帶有特定的邊框樣式，像這樣：

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

，每一行 

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

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

 標(biāo)簽內(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 對(duì) 

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

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

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

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

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

box-decoration-break 結(jié)合過(guò)渡動(dòng)畫(huà)

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

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

CodePen Demo -- box-decoration-break 過(guò)渡動(dòng)畫(huà)

又或者是這樣：

CodePen Demo -- box-decoration-break 結(jié)合過(guò)渡動(dòng)畫(huà)

你可以嘗試點(diǎn)進(jìn) Demo ，然后去掉 box-decoration-break: clone ，會(huì)發(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，其實(shí)還好，除了 IE 系列全軍覆沒(méi)，所以可以考慮應(yīng)用在移動(dòng)端。即便這個(gè)屬性不兼容，降級(jí)展示對(duì)頁(yè)面不會(huì)造成什么影響：

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

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

最后

國(guó)內(nèi)看到了大漠老師和張?chǎng)涡翊蟠蠖家呀?jīng)寫(xiě)過(guò)這個(gè)屬性，大家可以對(duì)比著看看，加深理解：

• CSS/CSS3 box-decoration-break屬性簡(jiǎn)介
• 初探box-decoration-break

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

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

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