css 瀑布流内容被截断，page-break-inside: avoid；不生效

@lucky.

于 2024-12-18 21:42:20 发布

阅读量412

点赞数 1

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44883704/article/details/144570333

版权

1、css 瀑布流内容被截断添加page-break-inside: avoid;也不生效，可以加个边框

.box {
    // 分几列
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    // 列间距
    column-gap: 1em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;

    &-list {
        // 防止列分割
        page-break-inside: avoid;
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        border: 1px transparent solid;
        box-sizing: border-box;

        &-item {
            margin-bottom: 24rpx;
        }
    }
}