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

techbrood 发表于 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(11) views6366 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2多站点HTTPS配置

    可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost

  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...