这两天接触到一个很有意思的CSS属性——box-decoration-break。让我们一起来了解一下。因为MDN上没有这个属性的中文文档，所以一直在想一个合理合适的中文翻译。直译：box--box，可以理解为元素框模型decoration--decoration，理解为elementstylebreak--linebreak，指word-break，理解为linebreak的表现那么，这个属性可以理解as，当换行发生时，该元素在其样式的A表示中。MDN上的英文解释是：box-decoration-breakCSS属性指定当元素的片段被打断为多行、多列或多页时应如何呈现。总体思路是，box-decoration-break属性指定当发生换行/换行时元素片段应该如何渲染。只有两个可能的值：{box-decoration-break:slice;//默认值box-decoration-break:clone;}换行符示例此属性通常适用于内联元素。假设我们有如下结构，并为其添加边框：ABCDEFGHIJKLMNspan{border:2pxsolid#999;}好了，效果如下，不起眼：OK，下一步是break，我们把上面一行文字打断，样式不变：ABCD
EFG
HI
JKLMN得到如下结果：O，可以看到即当文字换行时，边框也随之而来，结果第一行和最后一行是三边边框，中间两行只有上下边框。如果将4条线组合起来，就可以组装成图1，这是一个正常的显示效果。接下来我们添加主角box-decoration-break:clone:span{border:2pxsolid#999;+box-decoration-break:clone;}生效后我们会得到这样的结果：box-decoration-break:clone用法总结看到这里，我们已经可以大概明白这个属性的作用了：使用box-decoration-break:clone的inline元素，如果有换行显示，那么每一行都会有原来的单行All样式齐全。再看一个例子加深理解。有如下结构，使用box-decoration-break:clone前后两种效果：每一行
样式
是
保持
完整独立CodePenDemo--box-decoration-breakbox-decoration-break:clone有效样式影响范围当然，使用box-decoration-break:clone的元素并不是对所有样式都生效，只在如下样式中：backgroundborderborder-imagebox-shadowclip-pathmarginpaddingSyntaxbox-decoration-break:clone实际应用看看有没有靠谱的实际应用场景。box-decoration-break:clone在实现文字选择效果的时候会有这样的场景。我们想在多行文本中突出显示特定的一段文本。这时候我们可以用
嵌套来对包裹的文字进行一些具体的显示。例如，我们有这样一个副本： box-decoration-breakCSS属性指定了元素的片段在跨多行、多列或多页时应如何呈现。每个框片段使用指定的边框、填充和边距独立呈现每个片段。border-radius、border-image和box-shadow独立应用于每个片段。 ，每一行 都设置了上面的样式，但是如果文本内容不确定，容器的宽度也不确定？这种场景下使用box-decoration-break也很方便。当然，这里有一个小技巧。通常情况下，box-decoration-break:clone只对行内元素生效。如果我们的副本包含在 标签中，如下所示： box-decoration-breakCSS属性指定元素的片段在跨多行、多列或多页时应如何呈现。呈现每个框片段独立地用指定的边框、填充和边距包裹每个片段。border-radius、border-image和box-shadow独立应用于每个片段。 生效，可以通过设置 的display:inline来实现。这样，要实现上面的效果，我们只需要：p{display:inline;盒子装饰打破：克隆；background:linear-gradient(110deg,deeppink0%,deeppink98%,transparent98%,transparent100%);}无论文本内容或容器宽度如何变化，都能完美适配：CodePenDemo--box-decoration-break每行文字都有一个特定的边框比如我们希望当我们悬停文字内容的时候，可以高亮一些需要显示的关键文字段落，可能是这样的：CodePenDemo--box-decoration-break过渡动画或者这样：CodePenDemo--box-decoration-break结合transition动画，可以尝试点击进入Demo，然后去掉box-decoration-break:clone，你会发现效果大打折扣。兼容性的多少，按照平时的兼容性应该不会很好。而MDN也给出了这样的提示：这是一项实验性技术。在生产中使用它之前，请仔细检查浏览器兼容性表。看看CanIUse，其实还可以，只是IE系列彻底被淘汰了，可以考虑在移动端应用。即使这个属性不兼容，降级后的显示也不会对页面有任何影响：另外，本文给出的代码都是box-decoration-break:clone，CodePen自带autoprefixer。在实践中，可能需要写成：{box-decoration-break:clone;-webkit-box-decoration-break:clone;}最后看到大魔头和张新旭国内大部分都写过这个属性。大家可以对比加深理解：CSS/CSS3box-decoration-break属性介绍，box-decoration-break初步学习，更多精彩CSS技术文章汇总在我的Github——iCSS，持续不断更新。欢迎点个星订阅收藏。好了，本文到此结束，希望对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，文笔有限，知识匮乏，如有不妥之处，敬请谅解！文章，请告诉我。