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

Fork Me On Github

起因

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

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

column-count split

第一种方法(推荐)

.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布局内容被截断

Reprinted in:

0 255 0