I am trying to use the column-countcss3 property in a tag with several paragraphs in it. In Webkit browsers, I see what seems like an error. At certain screen sizes, paragraph fields cannot be divided into columns.
A screenshot is shown here (note that the third paragraph starting with the word “Duis” is discarded, while it should be on the same level as the top of the screen):
Here is the codepen problem . I fixed the width to 1000 pixels, so the problem is obvious to Chrome * / Safari users.
* Edit: just coming back at the beginning of 2018, and Chrome no longer suffers from this error. Safari (testing 11.0.3) does!
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>