做CSS避免分頁符的正確方法是什麼？

我試圖用wkhtmltopdf把這個頁面轉換成（有點）好看的PDF文檔：做CSS避免分頁符的正確方法是什麼？

http://z2codes.franklinlegal.net/franklin/DocViewer.jsp?showset=lubbockset&z2collection=lubbock&docid=405#405

我用下面的代碼至今：

a[name^="0"] p, a[name^="1"] p, a[name^="2"] p, a[name^="3"] p, a[name^="4"] p, a[name^="5"] p, a[name^="6"] p, a[name^="7"] p, a[name^="8"] p, a[name^="9"] p { 
    display: block; 
    page-break-inside: avoid; 
} 

a[name^="0"], a[name^="1"], a[name^="2"], a[name^="3"], a[name^="4"], a[name^="5"], a[name^="6"], a[name^="7"], a[name^="8"], a[name^="9"] { 
    display: block; 
    page-break-inside: avoid; 
} 

h5.Heading4:not(:first-child) { 
    page-break-before: always; 
} 

img { 
    visible: hidden; 
}

這大多是正確的，而且我的結果比起初要好。但是分頁符仍然不完全正確。問題樹看起來像這樣

<a> 
    <div>Section Header</div> 
    <p>some big paragraph of crappy city ordinances</p> 
</a>

現在，我已經得到了CSS在那裏將避免破壞其中可能一個段落（也有一些更比一頁紙的段落，但其餘的都很好）。但是，它仍會偶爾在頁面底部放置一個節標題，然後將該段移到下一個 - 如果它這樣做了，它也應該用它移動節標題，而不是分割它們。

這是CSS3中可解決的問題嗎？

[編輯]

<A NAME="328" /> 
    <DIV CLASS='Heading7'><span onClick="top.showBookmarkDialog('328');"><img src="http://z2codes.franklinlegal.net/franklin/worldlink.jpg" border="0"> &nbsp;</span>Sec. 17.&nbsp; &nbsp; &nbsp;Improvements of sidewalks and curbs.</DIV> 
    <P><Font Face="Times New Roman">Said City shall have the power to provide for the construction, improvement or repair of any sidewalk or curb by penal ordinance and to declare defective sidewalks or curbs public nuisances.</FONT> 
    </P> 
</A>

這個請求，不知道這將是多麼有用。

來源

2015-07-10 John O

部分標題不在段落內;它在錨內。在段落中添加page-break-inside: avoid;只能防止段落中的內容被分割。它不適用於該段的兄弟姐妹。

因此，如果您不希望段落標題和段落拆分，則需要將page-break-inside: avoid;添加到父級（即錨點），而不是段落。

a { 
    page-break-inside: avoid; 
}

來源

2015-07-10 02:21:16

難道他還沒有用第二個CSS選擇器'a [name^=「0」]，[name^=「1」]，... { display：block; page-break-inside：avoid; }'？ – Xufox

@Xufox不，因爲這些選擇器都不符合他提供的HTML。看到這裏：https://jsfiddle.net/uLz9fby0/ –

我知道，但至少他嘗試過。 – Xufox

簡化您的CSS選擇器。您當前的樣式並不適用於鏈接塊：

p, a { 
    display: block; 
    page-break-inside: avoid; 
}

實際上是p選擇是多餘的，因爲它們是a標籤內。

來源

2015-07-10 02:25:44

做CSS避免分頁符的正確方法是什麼？

回答

相關問題