有时候做网页设计，针对inline型元素希望换行的时候能够将样式自动地应用到每一行上。那么CSS的box-decoration-break属性则可以帮倒忙
这篇文章介绍box-decoration-break属性。
笔者最近做项目，想要在设计上实现：
比如，有一段文本：
<span>Hello, this is a long string of text that spills onto many lines</span>
笔者希望它是这样的：
笔者希望能够通过CSS简单优雅地解决这个问题。这样就必须将文本设置为display:inline
因为如果是block结果是这样的：
可是直接用inline属性，结果是这样的：
这时就要用到box-decoration-break这个属性了
MDN上对这个属性的解释是：
当一个盒元素被分成好几份时，
box-decoration-break属性会将background、padding、border等等这些属性是如何作用的。
当一个行内元素断成几行时，这个属性让不同行之间保持了一致性。它的默认选项是slice，这个选项相当于行内元素没有发生分离。
笔者认为可以这样去理解这个属性：一个行内元素本身具有一个样式，被断开成很多行后，每一个行又成为了一个新的行。
但是，当应用了这个属性的另一个选项
box-decoration-break: clone;
后，所有的原有的样式都会被用在断开的各个元素上。也就是说，padding、border这些样式会加在各个片段上，就好像他们是独立的元素一样。