如何使用 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將阻止它們跨列拆分，您可以嘗試以下邏輯：

<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。這可確保每個

元素在其列中保持完整而不被分割。