[译文]用CSS的box-decoration-break属性做出多行缩进
界面设计

[译文]用CSS的box-decoration-break属性做出多行缩进

有时候做网页设计,针对inline型元素希望换行的时候能够将样式自动地应用到每一行上。那么CSS的box-decoration-break属性则可以帮倒忙

原文:callmenick.com

这篇文章介绍box-decoration-break属性。

笔者最近做项目,想要在设计上实现:

  1. 文本高亮,比如背景颜色高亮
  2. 高亮仅覆盖文本区域
  3. 文本每一行应该有左右内间距

比如,有一段文本:

<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属性会将backgroundpaddingborder等等这些属性是如何作用的。

当一个行内元素断成几行时,这个属性让不同行之间保持了一致性。它的默认选项是slice,这个选项相当于行内元素没有发生分离。

笔者认为可以这样去理解这个属性:一个行内元素本身具有一个样式,被断开成很多行后,每一个行又成为了一个新的行。

但是,当应用了这个属性的另一个选项

box-decoration-break: clone;

后,所有的原有的样式都会被用在断开的各个元素上。也就是说,paddingborder这些样式会加在各个片段上,就好像他们是独立的元素一样。

笔者在codepen上面做了个例子,你也可试试看

这个属性目前浏览器支持良好

电子邮件地址不会被公开。 必填项已用*标注

文章归档