在列上使用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;