在列上使用CSS3和WebKit的列计数的额外保证金

Question

我正尝试在具有多个段落的标记上使用column-count css3属性。在Webkit浏览器上，我看到了什么似乎是一个错误。在某些屏幕尺寸下，段落边距无法很好地在列之间分割。

这里有一个截屏（注意第三段开始被丢弃单词“DUIS”，而应该是在屏幕的顶部齐平）：

这里有一个CodePen of the problem。 我已将宽度固定为1000px，因此Chrome */Safari用户很容易发现问题。

*编辑：只需在2018年年初检查，铬不再遭受这个错误。 Safari（测试11.0.3）呢！

我试图使用page-break-*规则来强制段落以避免中断。我也尝试使用-webkit-perspective:1根据http://caniuse.com/#feat=multicolumn的意见，但这没有效果。

任何想法的人？

article { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    width: 1000px; 
 
} 
 

 
p { 
 
    margin-top: 0; 
 
    margin-bottom: 1.3em; 
 
}

<article> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</article>

Answer 1

只需添加内p：

display: inline-block;