I have a list echoing out of a database and have given it column-count of 2. There is I would about 20 list items being printed on the page. Great, except as I get to the bottom of the page the last item gets broken up and some of the list item then goes to the top of the second column. Has anyone else had a similar issue or have a better solution in preventing the break up?
p.br {
margin-top: -15px;
}
.li-2col, .li-2col-roh {
break-inside: avoid;
padding-top: 10px;
padding-bottom: 10px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin-left: 50px;
}<ul class="li-2col-roh">
<li class="roh-list">
<p>Persons name with some details</p>
<p class="br">some details</p>
<p class="br">More details</p>
<p class="br">More details for this person</p>
</li>
</ul>Setting the li display to inline-block should accomplish what you're after.
p.br {
margin-top: -15px;
}
.li-2col, .li-2col-roh {
break-inside: avoid;
padding-top: 10px;
padding-bottom: 10px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin-left: 50px;
}
.li-2col-roh li {
display: inline-block;
}<ul class="li-2col-roh">
<li class="roh-list">
<p>Persons name with some details</p>
<p class="br">some details</p>
<p class="br">More details</p>
<p class="br">More details for this person</p>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus aliquam voluptate, vero quod ex hic, asperiores repellendus itaque dolorem fugit dolorum distinctio neque porro sequi aut deserunt. Eos, eum, sapiente!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo, omnis optio sint provident. Voluptas dignissimos eum accusantium similique, voluptate aliquam libero labore harum quae. Aspernatur laborum eligendi ex repellendus!</li>
</ul>