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

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;
}

Answer 2

理论上，您应该能够通过在 .card 上使用 break-inside: avoid; 来避免这种情况，但不幸的是，对 css 列的支持不是很好。

更多信息：https://css-tricks.com/almanac/properties/b/break-inside/

支持：http://caniuse.com/#feat=multicolumn

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

How to stop breaking tables border when page is spliting?

html

css

asp.net

frontend