Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Additional margin over column using column-count with CSS3 and WebKit

I'm trying to use the column-count css3 property on an tag with multiple paragraphs in it. On Webkit browsers I'm seeing what appears to be a bug. At certain screen sizes, paragraph margins are failing to split across columns nicely.

Here's a screen shot (notice that the third paragraph starting with the word "Duis" is dropped whereas it should be flush with the top of the screen):

enter image description here

Here's a CodePen of the problem. I've fixed the width to 1000px so the problem is obvious to Chrome* / Safari users.

*Edit: Just checking back in early 2018 and Chrome no longer suffers from this bug. Safari (testing 11.0.3) does!

I've attempted to use the page-break-* rules to force paragraphs to avoid breaks. I've also tried to use -webkit-perspective:1 as per the comments at http://caniuse.com/#feat=multicolumn but that's had no effect.

Any ideas folks?

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>
like image 528
Mere Development Avatar asked Oct 06 '15 11:10

Mere Development


People also ask

What is the use of margin in CSS?

Margins are used to create space around elements, outside of any defined borders. This element has a margin of 70px. The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins.

What is the use of column count in HTML?

Given the number of columns, the browser will evenly distribute the content in exactly that number of columns. This property can also be used in the shorthand for columns and can be used in tandem with column-width. When both properties are declared column-count is the maximum number of columns. column-count can be auto or an integer.

What is the column-count CSS property?

The column-count CSS property breaks an element's content into the specified number of columns. The number of columns is determined by other CSS properties, such as column-width. Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed.

What is the difference between column-count and column-gap in HTML?

The column-count property specifies the number of columns an element should be divided into. The following example will divide the text in the <div> element into 3 columns: The column-gap property specifies the gap between the columns.


1 Answers

Just add inside p:

display: inline-block;
like image 116
Bartłomiej Semańczyk Avatar answered Oct 02 '22 14:10

Bartłomiej Semańczyk