Using tailwindcss I have the following html
<ol class="relative columns-1 sm:columns-3">
<li>
<img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
</li>
<li>...</li>
...
</ol>
The related Tailwind css of ol is
.sm:columns-3 {
columns: 3;
}
As you can see (red arrow), a cell is wrapped. The other part of the cell is at the bottom of the middle column. This is something I don't want, no packaging. Is there any way to prevent this or should I make sure all cells have the same height?
P粉7636623902024-04-01 10:15:03
To prevent CSS columns from wrapping in Tailwind CSS, you can use the break-inside property. Setting break-inside to avoid-column on elements will prevent them from splitting across columns, you can try the following logic:
<ol class="relative columns-1 sm:columns-3">
<li class="break-inside-avoid-column">
<img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
</li>
<li class="break-inside-avoid-column">...</li>
...
</ol>
break-inside-avoid-column utility class provided by Tailwind CSS and sets the break-inside property to avoid-column. This ensures that each element remains intact within its column without being split.