插入式:对于基本示例来说，避免无效

Question

我使用的是Chrome v99和break-inside: avoid的基本用法--但它什么也不做。

主持人：这不是这篇文章和第一个答案都没有用的翻版。

我的目标是不允许所有这些div的内容在分页时分割：

<div class="opt">

下面是我的内联css：

<style media="screen" type="text/css">
    @media print {
        div.opt, table {
            break-inside: avoid !important;
        }
    }
</style>

完整的html有点长，但是您可以查看整个这里。

只需按CTRL+P键，观察到它会在div的中间用一个opt类分页，但它不应该这样做，因为我使用的是break-inside: avoid。

我链接到的示例非常短，而且是人为的，但是我的真实场景有更多的部分，并且是动态的，从数据库中提取。因此，我们无法知道相对于div，页面会在哪里被打破。我只想让那些div中的内容和那个类保持在一起，永远保持在同一个页面上，而不是分割成一个分页。没有任何div内容超过一个页面，他们甚至比我的例子短。

救命，我做错什么了？

Answer 1

你的风格标签里有media=screen ..。只有在使用屏幕而不是打印机时，打印样式才会加载

<style media="print" type="text/css">
  div.opt, table {
    break-inside: avoid !important;
  }
</style>

当您修复它时，它似乎仍然包装在多个页面上更丑，但至少现在您可以使用什么打印样式工作。