css - 在 CSS3 和 WebKit 中使用列计数的列的额外边距

Question

我正在尝试在包含多个段落的标签上使用 column-count css3 属性。在 Webkit 浏览器上，我看到了似乎是错误的东西。在某些屏幕尺寸下，段落边距无法很好地跨栏分割。

这是一个屏幕截图(请注意，第三段以单词“Duis”开头的部分被删除了，而它应该与屏幕顶部齐平):

这是一个 CodePen of the problem .我已将宽度固定为 1000 像素，因此该问题对于 Chrome*/Safari 用户来说是显而易见的。

*编辑:只是在 2018 年初进行检查，Chrome 不再受此错误的影响。 Safari(测试 11.0.3)可以!

我尝试使用 page-break-* 规则强制段落避免断行。我还尝试根据 http://caniuse.com/#feat=multicolumn 上的评论使用 -webkit-perspective:1但这没有任何效果。

有什么想法吗？

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;