当使用 CSS3 列时，我可以使用什么策略来确保 h1-h6 标题永远不会在列底部孤立？
Here's a JSFiddle demo .调整宽度，您会发现尽管存在以下旨在阻止标题后分页的 CSS 属性，但在大多数浏览器中它仍然会发生。
.columnize h1,
.columnize h2,
.columnize h3,
.columnize h4 {
break-after: avoid;
page-break-after: avoid;
-webkit-column-break-after: avoid;
}
我什至花时间弄乱了 orphans 属性，但当它起作用时，出于某种原因，它只适用于段落行，而不适用于标题。
orphans: 2;
这对我来说是一个 CSS 列的交易破坏者，因为文本通常有标题。有没有人找到任何解决方案？
最佳答案
不太可能是普遍的需求/需求，但您偶然发现了我每天都要面对的一个领域。我们的撰稿人非常重视零孤儿。我制作了一个脚本来处理这个问题。
你需要有 jQuery，大多数网站都有...你只需要在文档就绪函数中运行它。开始了:
/** ORPHAN SLAYER - The world's most irrelevant jQuery plugin **/
var orphanSlayer = {
targets : '#your-selector, .another-selector', // These are your selectors, regions where you want the orphans dealt with.
timer : 1000 // Delay before running this script, in milliseconds (gives precedence to other scripts)
}
setTimeout(function(){
$(orphanSlayer.targets).each(function(){
orphanSlayer.content = $(this).html().split(' ');
orphanSlayer.last = orphanSlayer.content[orphanSlayer.content.length - 2] + ' ' + orphanSlayer.content[orphanSlayer.content.length - 1];
orphanSlayer.content[orphanSlayer.content.length - 2] = orphanSlayer.last;
orphanSlayer.content.splice((orphanSlayer.content.length - 1), 1);
orphanSlayer.content = orphanSlayer.content.join(' ');
$(this).html(orphanSlayer.content);
});
}, orphanSlayer.timer );
只需将其复制粘贴到您的文档就绪函数中，然后修改您看到代码注释的位置，就可以开始了。
关于css - 如何避免 CSS 列中的孤立标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24662701/