是否可以在無序列表中強制分頁？

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