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

Question

我写了一个意大利餐厅的菜单。这个菜单由一个无序列表组成，每个li元素都有一个名为“headline”的类。这些李元素中的每一个都包含一个标题，另一个元素里面有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>

我试图使菜单的打印版本和不知道为什么不是“分页-后”，也不是“页面级打破之前“在CSS中的”.headline“上工作。

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

我也尝试用div元素包装“headline”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文件...

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

是否有一个基本的错误，我还没有看到，或者它是根本无法控制在无序列表中完成分页符的位置？

编辑： 我尝试了“可能重复的线程”的不同含义以及它所做的所有事情（我不知道我是否在那里并且可以正确解释）是它试图制作分页符。 ..

它在包含ul-s的“标题”li-s之间生成空间......不幸的是，空白空间出现在页面中间（打印预览和保存的pdf）并且具有一定的高度。 。因此它不会真正推动下一页上的“标题”li-s ......只要稍微下降，即可在“标题”li结束的任何地方

Answer 1

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

添加break-insid e：避免;到ul