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

iefreer 发表于 2017-01-01 19:20:48

标签: css3, 技巧

- +

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

本文介绍如何使用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上,结果如下:

blob.png

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

blob.png

可以把块元素(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;
}

得到效果如下:

blob.png

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

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

blob.png

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

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

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

你也可以自己在线试试看

possitive(0) negative(0) views898 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章