CSS列-如果元素位于列底部，则强制换行

Question

我有以下代码，其中{activity_type_copy}是客户端输入段落和h3标记的cms自定义字段

<article class="copy-container">
    <div class="col-sm-12 columns-3">
        {activity_type_copy}
    </div><!-- /.col-sm-12columns-3 -->
</article><!-- /.col-sm-12 -->

columns-3类设置了column-count:3，运行良好。但是，在某些大小的屏幕上，h3标记位于列的底部，这是我想避免的。请看截图：

​

。

如果h3标记是列中的最后一个元素，有没有办法强制它们移动到下一列？

Answer 1

根据CSS Fragmentation的说法，您可以使用以下命令来防止在元素之后立即换行

break-after: avoid-column;

您还可以使用以下命令防止各种中断

break-after: avoid;

为了获得更好的兼容性，请使用old aliases

page-break-after: avoid;

这可能并不是在所有浏览器上都有效。