box-decoration-break跨列布局渲染demo页面

回到相关文章 »

效果：

2018年自己花了半年时间重写了Canvas API中文文档，结合自己实际开发经验，增加更多案例。并采用独立域名构建：www.canvasapi.cn。比MDN文档更利于理解。

设置box-decoration-break为

//zxx: 如果Chrome浏览器无效果，试试Firefox下体验

代码：

CSS代码：
.box {
    max-width: 300px;
    columns: 2;
}
.text {
    border: 5px solid #cd0000;
}
.clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;    
}
HTML代码：
<div class="box">
    <p id="text" class="text">2018年...</p>
</div>

<button id="button" data-value="clone">设置box-decoration-break为</button>
JS代码：
button.addEventListener('click', function () {
    var cssValue = this.getAttribute('data-value');
    if (cssValue == 'clone') {
        text.classList.add('clone');    
        this.setAttribute('data-value', 'slice');
    } else {
        text.classList.remove('clone');
        this.setAttribute('data-value', 'clone');
    }
});