CSS Columns - 如果元素位于列的底部，则强制中断答案

【问题标题】：CSS Columns - force break if element is at bottom of columnCSS Columns - 如果元素位于列的底部，则强制中断
【发布时间】：2016-04-16 05:54:22
【问题描述】：

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

<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标签是列中的最后一个元素，有没有办法强制它们移动到下一列？

【问题讨论】：

据我所知不使用 css
查看 CSS 属性 widows 和 orphans，它们确定段落开头和结尾的多少行应该在中断之后或之前。

标签： css

【解决方案1】：

根据CSS Fragmentation，您可以在元素之后防止分列

break-after: avoid-column;

您还可以使用

来防止各种中断

break-after: avoid;

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

page-break-after: avoid;

这可能不适用于所有浏览器。

【讨论】：

适用于 IE Edge 但不适用于 Chrome。将查看是否有可以使用的 webkit 前缀。