如何使用 Tailwindcss 防止 css 列换行

Question

使用 tailwindcss 我有以下 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;
}

正如您所看到的（红色箭头），一个细胞被包裹。该单元格的另一部分位于中间列的底部。这是我不想要的东西，没有包装。有什么方法可以防止这种情况，或者我应该确保所有单元格具有相同的高度吗？

Answer 1

要防止 CSS 列在 Tailwind 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>元素在其列内保持完整而不被分裂。