DeathGhost

box-decoration-break处理行内元素跨行跨列断裂样式渲染的完整性

这篇文章发布于 2019年01月09日 22:36 星期三 阅读 367 次,评论 0 条

DeathGhost 编辑,归类于css »

多行文本亦或多列文本元素中,我们对其特殊提醒性关键词添加特殊样式时,如果出现元素内文本跨行或跨列断裂,则样式也随之断裂,一定程度影响其视觉效果,这里通过css中box-decoration-break属性对其修饰渲染。

我们在实例中,某一片段文本中对其特定文本(行内元素)添加特殊样式,如,背景色、背景图、边框、圆角、阴影等样式时除过遇到跨行断裂或跨列文本断裂,则其样式也跟随断裂,在视觉效果上显示不是很友好;那么,CSS中的box-decoration-break就可以处理其元素样式的完整性。

box-decoration-break
CSS之box-decoration-break渲染元素样式的完整性

设置box-decoration-break:slice或未设置该属性后显示效果:

box-decoration-break
默认情况下或未加box-decoration-break属性值为slice时显示效果

设置box-decoration-break:clone后显示效果:

box-decoration-break
添加box-decoration-break属性值clone时显示效果

上面是跨行显示,下面我们通过columns设置多列文本排版时的显示。

columns box-decoration-break
columns box-decoration-break
columns box-decoration-break
columns box-decoration-break

如果对文本行内元素或文本按钮样式设置时,下面这几个属性会影响其渲染效果,在处理时注意添加box-decoration-break属性值为clone即可保持其样式的完整性。

backgroundborderborder-imagebox-shadowclip-pathmarginpadding

至于兼容性,webkit内核浏览器添加-webkit-前缀即可正常显示。

本片文章示例代码如下,以供预览参考,更多的样式(如边框,背景...)自行测试。

<body>
    <section>
        <h1>box-decoration-break</h1>
        <div class="text">
            HTML语言对其内容信息作以布局归属同时或之后,
            就需要通过CSS对其元素进行像素级的控制与<em>修饰</em>,
            已达到最友好的视觉体验效果。CSS3也是对其原CSS的一种升级与拓展,
            更为充分的渲染页面提升页面性能。
            同时,这也是web前端开发者应具备了解且熟练应用的计算机语言。
        </div>
    </section>
</body>
section{
    width:640px;
    padding:20px;
    margin:0 auto;
    box-sizing: border-box;
}
section h1{font-size:16px;text-align:center;}
section .text{
    font-size:12px;
    color:#666;
    line-height:1.6;
    column-gap: 20px;
    columns: 3;
}
section .text em{
    background:red;
    border-radius:3px;
    color:white;
    padding:0 5px;
    -webkit-box-decoration-break:slice;
    box-decoration-break:slice;
}

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋视觉前端爱好者

志于道,据于德,依于仁,游于艺。

web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


4

目录

20

文章

3

评论

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕