html - 页面拆分时如何停止打破表格边框？

Question

我想在我的网站上制作带有 CSS 边框的卡片，每列显示 3 张卡片。问题是我不想拆牌。我的 CSS:

<style>
.card {
    border-style: ridge;
    border-width: 3px;
}
.card-deck{
    -webkit-column-count:3;
     overflow-wrap:break-word;   
}
</style>

Cutted Cards

如何停止拆分卡片？

Answer 1

将 break-inside: avoid; 添加到 .card 元素:

.card {
    border-style: ridge;
    border-width: 3px;
    break-inside: avoid;
}