使用CSS3 box-decoration-break特性实现多行文本样式

当文章中的长文本被自动断行为多行文本时，其样式可能会出乎我们的设计。

本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。

按照规范定义，box-decoration-break被用来处理分页（page-break）或断行（line-break）时元素的样式。

默认情况下，当我们设置元素背景（background）或边界（border）时，这个样式被应用在整个元素上，

即使被断行也是如此，比如下面的块元素：

<div class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, 
optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. 
Magni, magnam.
</div>

样式代码如下：

div.test{
  background: orange;
}

块状元素的样式被应用在整个block上，结果如下：

如果我们想实现下面的背景效果：

可以把块元素（block）换成行内元素（inline）：

<span class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, 
optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. 
Magni, magnam.
</span>

span.test{
  background: orange;
}

如果给上面的span文本添加边距和边线：

span.test{
  background: orange;padding:0 20px;border: 1px solid red; line-height:22px;
}

得到效果如下：

可以看到尽管被断成了多行，border和padding样式仍然被当作整行作用在文本上。

如果要想把样式应用到每个断行文本上，即如下的预期效果：

这个时候就需要使用CSS3新引入的“实验”特性：box-decoration-break，

把box-decoration-break设置为clone，即可获得上面的效果，其实现原理是把长文本切分成多个短文本，

然后分别在每个短文本上应用样式。

你也可以自己在线试试看。