使用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,即可获得上面的效果,其实现原理是把长文本切分成多个短文本,
然后分别在每个短文本上应用样式。
你也可以自己在线试试看。
最新评论
- 相关文章
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
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入门教程2 - 着色器(上)
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
更多...