如何使用Tailwind CSS防止CSS列元素换行？

不需要强制所有列表项高度一致，给每个<li>元素添加Tailwind的break-inside-avoid类即可禁止列表项被拆分到不同列。

修改后的HTML代码如下：

<ol class="relative columns-1 sm:columns-3">
   <li class="break-inside-avoid">
       <img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
   </li>
   <li class="break-inside-avoid">...</li>
   ...
</ol>

这个类对应的CSS规则是break-inside: avoid;，它会让浏览器避免在列表项内部进行分栏中断，确保每个列表项完整显示在同一列中。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri