修復孤兒冠軍

我目前停留在了在下面的例子中打印列，而無需孤兒冠軍，就像一個CSS打印問題：修復孤兒冠軍

columns

<div class="two-columns"> 
    <h1>Hello, Title</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <h1>Other title, world!</h1> 
    <h2> Subtitle, world</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div> 

.two-columns { 
    column-count: 2; 
} 

h1, h2 { 
    break-after: avoid; 
}

我的目標是製作一張CSS表格，用於打印結構合理，長達40頁的使用Google Chrome瀏覽器的無頭文檔。不幸的是，我在呈現文檔中陷入了孤兒的困境：在前面的例子中，我更喜歡在第二列中有第二個標題及其關聯的內容。

有沒有一種CSS方法來完成這項工作？我應該在我的文檔代碼中轉而使用強制列跳轉的自定義div嗎？

謝謝！

〜spj

來源

2017-10-11 Stephane.P

我終於想出了在90％的情況下，我工作的解決方案：

* + h2,* + h3,* + h4,* + h5,* + h6 { 
    break-inside: avoid-column!important; 
    break-after: avoid-column!important; 
    page-break-inside: avoid!important; 
    page-break-after: avoid!important; 
    -webkit-column-break-inside: avoid!important; 
    -webkit-column-break-after: avoid!important; 
} 
h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { 
    break-before: avoid-column!important; 
    page-break-before: avoid!important; 
    -webkit-column-break-before: avoid!important; 
} 
h1:not(:first-child) { 
    break-before: column; 
}

（這是一個臨時的解決方案，因爲是我知道這是醜陋，我還在尋找通用的方式來打印PDF爲零h1-h6孤兒）

來源

2017-10-11 13:56:06

如何使用：not（X）selector？在列之前選擇除了第一個H1之外的全部內容？

h1:not(:first-child) { 
    break-before: column; 
}

來源

2017-10-11 08:00:11 DollarChills

這是一個非常好的開始！我現在嘗試使用所有h1-6的通用解決方案:) –

問題來自谷歌瀏覽器本身，我嘗試了Weasyprint，它使用我剛剛寫的醜陋的CSS時，就像一個魅力！

來源

2017-10-11 17:48:04

修復孤兒冠軍

回答

相關問題