Question

我为意大利餐厅写了一份菜单。此菜单包含一个无序列表，其中每个li元素都有一个名为＆＃34;标题＆＃34;的类。这些li元素中的每一个都包含一个标题和另一个ul里面的li-s作为菜肴。

看起来像这样：

＆＃13;

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

＆＃13;

我正在尝试制作菜单的可打印版本，并且不知道为什么＆＃34; page-break-after＆＃34;也不是＆＃34; page-break-before＆＃34;工作＆＃34; .headline＆＃34;在CSS。

我尝试了不同的显示值，如＆＃34; block＆＃34;，＆＃34; inline-block＆＃34;或＆＃34; table-row＆＃34;，因为阅读某些论坛建议它。我也尝试了不同的位置值（＆＃34;绝对＆＃34;，＆＃34;相对＆＃34;，＆＃34;静态＆＃34;）......

我还尝试包装＆＃34;标题＆＃34;使用div元素的li-s并在div元素上使用page-break：

＆＃13;

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

＆＃13;

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

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

是否存在我尚未看到的根本错误，或者根本无法控制在无序列表中完成分页的位置？

编辑：我尝试了可能重复的线程＆＃34;它所做的一切（我不知道我是否在那里并且可以正确解释）是它试图打破分页......

它在＆＃34;标题＆＃34;之间产生空间。 li-s包含ul-s ...不幸的是，空白区域出现在页面的中间（打印预览并保存为pdf）并且具有一定的高度...所以它并没有真正推动＆＃34 ;标题＆＃34; li-s在下一页......只要稍微低一点＆＃34;标题＆＃34; li结束

Answer 1

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

添加break-inside：避免;到ul

Answer 2

我在将page-break-after: always添加到li时遇到了同样的问题。通过在div内添加page-break-after: always，然后加上空白的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类中重复headline。

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

2 个答案: