# box-decoration-break处理行内元素跨行跨列断裂样式渲染的完整性 > 多行文本亦或多列文本元素中，我们对其特殊提醒性关键词添加特殊样式时，如果出现元素内文本跨行或跨列断裂，则样式也随之断裂，一定程度影响其视觉效果，这里通过css中box-decoration-break属性对其修饰渲染。 Author: DeathGhost Published: 2019-01-09 22:36:03 Category: css Canonical: https://www.deathghost.cn/article/css/43 Keywords: css, css3, box-decoration-break, 样式, 断裂, 行内元素, 背景样式断裂, 边框样式断裂, 元素样式断裂, 按钮样式断裂我们在实例中，某一片段文本中对其特定文本（行内元素）添加特殊样式，如，背景色、背景图、边框、圆角、阴影等样式时除过遇到跨行断裂或跨列文本断裂，则其样式也跟随断裂，在视觉效果上显示不是很友好；那么，CSS中的box-decoration-break就可以处理其元素样式的完整性。 ![box-decoration-break](https://www.deathghost.cn/public/upload/article/2019/01/1547043405655.jpg) CSS之box-decoration-break渲染元素样式的完整性 ## 设置box-decoration-break:slice或未设置该属性后显示效果： ![box-decoration-break](https://www.deathghost.cn/public/upload/article/2019/01/1547043518808.jpg) 默认情况下或未加box-decoration-break属性值为slice时显示效果 ## 设置box-decoration-break:clone后显示效果： ![box-decoration-break](https://www.deathghost.cn/public/upload/article/2019/01/1547043571056.jpg) 添加box-decoration-break属性值clone时显示效果上面是跨行显示，下面我们通过columns设置多列文本排版时的显示。 ![columns box-decoration-break](https://www.deathghost.cn/public/upload/article/2019/01/1547043910048.jpg) columns box-decoration-break ![columns box-decoration-break](https://www.deathghost.cn/public/upload/article/2019/01/1547043971731.jpg) columns box-decoration-break 如果对文本行内元素或文本按钮样式设置时，下面这几个属性会影响其渲染效果，在处理时注意添加box-decoration-break属性值为clone即可保持其样式的完整性。 background、border、border-image、box-shadow、clip-path、margin、padding 至于兼容性，webkit内核浏览器添加-webkit-前缀即可正常显示。本片文章示例代码如下，以供预览参考，更多的样式（如边框，背景...）自行测试。

box-decoration-break

HTML语言对其内容信息作以布局归属同时或之后，就需要通过CSS对其元素进行像素级的控制与修饰，已达到最友好的视觉体验效果。CSS3也是对其原CSS的一种升级与拓展，更为充分的渲染页面提升页面性能。同时，这也是web前端开发者应具备了解且熟练应用的计算机语言。

section{ width:640px; padding:20px; margin:0 auto; box-sizing: border-box; } section h1{font-size:16px;text-align:center;} section .text{ font-size:12px; color:#666; line-height:1.6; column-gap: 20px; columns: 3; } section .text em{ background:red; border-radius:3px; color:white; padding:0 5px; -webkit-box-decoration-break:slice; box-decoration-break:slice; } ## Related - Previous: [CSS Scroll Snapping滚动吸附锁定元素或位置](https://www.deathghost.cn/article/css/40) - Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)