使用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) views1217 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...