英文:
How to prevent css columns from wrapping with Tailwindcss
问题
使用Tailwind CSS，我有以下的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>
ol 元素的相关Tailwind CSS代码是：
.sm:columns-3 {
columns: 3;
}
正如您可以看到的（红色箭头），一个单元格被换行了。该单元格的其他部分位于中间列的底部。这是我不希望看到的，不想要换行。是否有方法可以防止这种情况发生，或者我应该确保所有单元格具有相同的高度？
英文:
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 relevant Tailwind css for the ol is
.sm:columns-3 {
columns: 3;
}
As you can see (red arrow) one cell is wrapped. The other part of that cell is at the bottom of the middle column. This is something I don't want, no wrapping. Is there some way this can be prevented or should I make sure that all cells have the same height?
答案1
得分: 1
为了防止Tailwind CSS中的CSS列换行，您可以使用break-inside属性。将break-inside设置为avoid-column以适用于<li>元素将防止它们跨列分割，您可以尝试以下逻辑：
<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实用类由Tailwind CSS提供，并将break-inside属性设置为avoid-column。这确保每个<li>元素保持在其列内而不被分割。
英文:
To prevent CSS columns from wrapping in Tailwind CSS, you can use the break-inside property. Setting break-inside to avoid-column on the <li> elements will prevent them from being split across columns, you can try this 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>
The break-inside-avoid-column utility class is provided by Tailwind CSS and sets the break-inside property to avoid-column. This ensures that each <li> element remains intact within its column without being split.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论