Keep multiple <li> lines together
I am creating an list of names and addresses. Each is in an <li> within an <ol>. Each name and address ends with a <br>. When displayed I have the <ol> within a <div style="column-count: 3">. My problem is that on occasion an <li> group will get broken between columns. Is there a way with CSS to ensure that all the lines of an <li> remain together across a column break? TIA for any assistance.
5 Replies
could you send a picture of the problem your having please so i'm able to see the issue?
i'm not sure if this is what you mean but is this how you were saying you wanted it? https://codepen.io/deerCabin/pen/abPbGeM.
Edit-
i tried to re-create your issue in the first section of code but couldn't, in the second section of code i adapted it a little to not use line breaks or column-count with some utility classes, that should prevent any bugs like you've mentioned if you decide to take that route 👍
I guess I wasn't detailed enough... sorry for that. The problem is that sometimes an <li> group will get split between the bottom of the 1st column and the top of the 2nd column. That is the Name and 1st line of the address is at the bottom of the 1st column and the 2nd address line and phone number is at the top of the 2nd column. I'll try wrapping the guts of the <li> in a <p> tag. Maybe there is a no-break attribute that is available. Gotta do some looking for that. Thanks for your help.
Are you trying to avoid using a table? Without code it's really hard to even really picture what you're talking about if I'm honest
I think you need to look at ‘break-inside: avoid;‘
https://codepen.io/cbolson/pen/wvRvENg
That did the trick. Thanks ever so much!!!!