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

Question

我为一家意大利餐厅编写了一个菜单。这个菜单由一个无序列表组成，每个 li 元素都有一个名为“headline”的类。每个 li 元素包含一个标题，并包含一个内部 ul，其中包含作为菜品的 li 元素。

它看起来像这样：

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

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

我尝试了不同的显示值，如“block”，“inline-block”或“table-row”，因为阅读某些论坛建议这样做。我还尝试了不同的位置值（“absolute”，“relative”，“static”）...

我还尝试将“headline” li元素包装在div元素中，并在div元素上使用page-break：

<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结束的地方略微向下移动

- sirdareDeviL

---

可能是如何在打印具有大量行的表格时应用CSS分页？的重复问题。 - Kristján

谢谢！我明天会尝试这个！ - sirdareDeviL

Answer 1

我遇到了相同的问题，试图将 page-break-after: always 添加到 li 上。通过在内部添加一个带有 page-break-after: always 的 div，后跟一个空的 div 来解决它。它可以在 Edge、IE11 和 Chrome 上工作（尚未在 Firefox 上测试）。

修改您的示例后，应如下所示：

<ul>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
      <div style="page-break-after: always"></div>
      <div></div>
  </li>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
      <div style="page-break-after: always"></div>
      <div></div>
  </li>
</ul>

注意：不要在你的标题类中重复使用page-break-after。

- d.i.joe

Answer 2

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

将 "break-inside: avoid;" 添加到 ul。

- Martirosian

---

谢谢！我明天会试试看！ - sirdareDeviL