html - 是否可以在无序列表中强制分页？

Question

我为一家意大利餐厅写了一份菜单。这个菜单由一个无序列表组成，其中每个 li 元素都有一个名为“headline”的类。这些 li 元素中的每一个都包含一个标题和另一个 ul，里面有 li-s 作为菜肴。

看起来像这样:

<ul>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
</ul>    

我正在尝试制作菜单的可打印版本，但不知道为什么“page-break-after”和“page-break-before”都适用于 CSS 中的“.headline”。

我尝试了不同的显示值，如“block”、“inline-block”或“table-row”，因为阅读某些论坛时建议这样做。我还尝试了不同的位置值(“绝对”、“相对”、“静态”)...

我还尝试用 div 元素包裹“标题”li-s 并在 div 元素上使用分页符:

<ul>
  <div>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  </div>
  <div>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  </div>
</ul>

我开始相信我唯一的选择是重新考虑无序列表概念或按需打印 pdf 文件...

我想我会选择第二种方法，因为我在移动版本中使用 li-s 来切换 ul-s。

是否存在我尚未发现的基本错误，或者根本无法控制在无序列表中进行分页的位置？

编辑: 我尝试了“可能的重复线程”的不同建议以及它所做的一切(我不知道我是否在那里并且可以正确解释它)是它试图制作分页符......

它在包含 ul-s 的“标题”li-s 之间生成空间......不幸的是，空白出现在页面中间(打印预览和保存的 pdf)并且具有一定的高度......所以它并没有真正插入下一页的“标题”li-s...只是在“标题”li 结束的地方略微向下

Answer 1

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

添加闯入:避免；到 ul