column-count, Why does it move the line to the next column even though there is space?

5 days ago 13
ARTICLE AD BOX

I'm creating a book-like reading interface using the column-count property to separate pages. Unfortunately, sometimes at a certain height, the number of rows in one column differs from the number of rows in the adjacent column, and this doesn't look very nice. Please see the screenshot below.

A screenshot of what this problem looks like. The bottom line of the second column for some reason moved to the next column, although there is enough space for the line

In Firefox everything looks OK to me, but not in Chrome and Edge.

The code example is very simple:

https://jsfiddle.net/352wgfhe/1/

<div style="max-width: 400px;"> <div style="column-count: 2;column-gap: 20px;height: 133px;"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div>

I hope something will help me.

Evgeniy's user avatar

New contributor

Evgeniy is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Read Entire Article