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

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”上起作用。

我尝试了不同的显示值，如“块”、“内联块”或“表行”，因为阅读某些论坛建议这样做。我还尝试了不同的位置值（“绝对”，“相对”，“静态”）......

我还尝试用 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