CSS 使用 column-count 实现瀑布流出现内容分割的解决办法

起因

使用 column-count 实现瀑布流时，出现内容被分割，大部分都在同一列，但是在一列的最后一个会出现部分内容被分割到了另一列。

.message-box {
    column-count: 2;
    column-gap: .8rem;
}
.message-list-item {
    display: block;
}

第一种方法（推荐）

.message-list-item {
    page-break-inside: avoid;
}

原文链接

column-count瀑布流导致元素被截断-解决方法

第二种方法

.message-list-item {
    -webkit-column-break-inside: avoid;
}

原文链接

关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式

第三种方法

.message-list-item {
    height: 100%;
    overflow: auto;
}

原文链接

CSS3多列样式column布局内容被截断

Reprint please keep the original link: https://zodream.cn/blog/id/239.html