摘要：当然这里有个小技巧，正常而言，只对元素生效，如果我们的文案像是这样包裹在标签内要使对生效，可以通过设定的来实现。
这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。
因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下：
word-break ，理解为断行时候的表现那么，这个属性可以先理解为，元素在发生断行时其样式的表现形式。
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 属性规定了一个元素片段在发生折行/断行时，应该如何被渲染。
可选取值只有两个：
{
box-decoration-break: slice; // 默认取值
box-decoration-break: clone;
}
这个属性通常作用于内联元素。假设我们存在如下结构，并且给它添加一个边框：
ABCDEFGHIJKLMN
span {
border: 2px solid #999;
}
嗯，效果如下，平平无奇：
好，接下来就是 break，我们把上面一行的文字断行，样式不变：
ABCD
EFG
HI
JKLMN
得到如下结果：
O，可以看到，文字换行的同时，边框也随之变化，头尾两行都有 3 边边框，中间两行只有上下两边边框。如果将 4 行合起来，可以拼成图一，这个是正常的展示效果。
接下来，我们加上本文的主角 box-decoration-break: clone：
span {
border: 2px solid #999;
+ box-decoration-break: clone;
}
生效后，我们将会得到这样的结果：
看到这里，我们已经可以大概理解这个属性的作用了：
使用了 box-decoration-break: clone 的内联元素，如果存在折行显示，那么每一行都将拥有原本单行的所有完整样式。
再看个例子加深下理解，存在如下结构，其使用了 box-decoration-break: clone 前后两种效果：
每一行
样式
都
保持
完整独立
CodePen Demo -- box-decoration-break
当然，使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效，只会作用于下列样式：
接下来看看，有没有什么靠谱的实际应用场景。
会有这样的场景，我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候，我们可以通过 嵌套 ，对 包裹的文字进行一些特定的展示。
譬如我们有这样一段文案：
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，这样，无论强调文案是否换行，每一处的强调背景都是一致的：
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 也非常便捷。当然这里有个小技巧，正常而言， box-decoration-break: clone 只对 inline 元素生效，如果我们的文案像是这样包裹在 标签内：
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 对 生效，可以通过设定 的 display: inline 来实现。如此一来，要实现上述效果，我们只需要：
p {
display: inline;
box-decoration-break: clone;
background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
无论文本内容或者容器宽度如何变化，都能完美适配：
CodePen Demo -- box-decoration-break 每行文字带特定边框
结合上面的内容，我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。
譬如，我们希望当我们 hover 文字内容的时候，一些重点需要展示的文字段落能够被强调展示，可能是这样：
CodePen Demo -- box-decoration-break 过渡动画
又或者是这样：
CodePen Demo -- box-decoration-break 结合过渡动画
你可以尝试点进 Demo ，然后去掉 box-decoration-break: clone ，会发现效果大打折扣。
额，按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示：
This is an experimental technology. Check the Browser compatibility table carefully before using this in production.
看看 Can I Use，其实还好，除了 IE 系列全军覆没，所以可以考虑应用在移动端。即便这个属性不兼容，降级展示对页面不会造成什么影响：
另外，本文中，给出的代码都是 box-decoration-break: clone ，CodePen 自带了 autoprefixer 实际中可能需要写成：
{
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
国内看到了大漠老师和张鑫旭大大都已经写过这个属性，大家可以对比着看看，加深理解：
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
好了，本文到此结束，希望对你有帮助 :)
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1189.html
摘要：可选取值只有两个默认取值换行示例这个属性通常作用于内联元素。 这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。 因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： box -- 盒，可以理解为元素盒模型 decoration -- 装饰，理解为元素样式 break -- 断行，参考...
摘要：就要借助属性。改动如下结果如下可以看到断开的两端都是圆角在布局中，总会存在元素盒子断开的情况，可以决定断开时候的渲染表现。结果如下而默认状态所有行累加为一个渐变在移动端页面，包括小程序中可以放心使用。 box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。举个例子 生命的道路上永远...
摘要：阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。实现原理纯个人理解创建一个与元素尺寸一致的阴影盒子将阴影盒子定位到于元素重合，并位于元素之上水平和垂直各画两条线，分别跟元素重合共条分别记为根据和移动。 前言 说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。 二话不说看效果 showI...
摘要：有趣的浏览器活跃窗口监听在浏览器中，有这样两个事件监听，分别表示的是窗口失去焦点和窗口处于活跃状态，什么意思呢即在你浏览其他窗口页面或是浏览器最小化又或是点击了其他程序等等，都算是浏览器窗口失去焦点，那么事件就会触发。 2016-04-11 有趣的浏览器活跃窗口监听 window.onblur & window.onfocus 在浏览器中，有这样两个事件监听 window.onblur...
阅读 716·2023-04-25 19:43
阅读 3912·2021-11-30 14:52
阅读 3788·2021-11-30 14:52
阅读 3856·2021-11-29 11:00
阅读 3786·2021-11-29 11:00
阅读 3872·2021-11-29 11:00
阅读 3560·2021-11-29 11:00
阅读 6111·2021-11-29 11:00
