什么是正确的方法来做CSS以避免分页？ [英] What is the correct way to do the CSS to avoid page breaks?

问题描述

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

我目前使用下面的代码：

  a [name ^ =0] p，a [name ^ =1] p， ] p，a [名称^ =3] p，a [名称^ =4] p，a [名称^ =5] p， ^ =7] p，a [name ^ =8] p，a [name ^ =9] p {
 display： 
 page-break-inside：avoid; 
} 
 
a [name ^ =0]，[name ^ =1]，[name ^ =2]， ]，a [名称^ =7]，a [名称^ =4]，a [名称^ =5]， ]，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>肮脏的城市条例的一些大段落< / p> 
< / a> 
  

现在，我有一个CSS，它可以避免打破一个段落少于一页的段落，但其余都很好）。但是，它仍然会在页面的底部偶尔放置一个段头，然后将段落移动到下一个 - 如果这样做，它也应该移动段头，而不是分割它们。

这是CSS3中可解决的问题吗？

 < A NAME =328/> 
< DIV CLASS ='Heading7'>< span onClick =top.showBookmarkDialog（'328'）;>< img src =http://z2codes.franklinlegal.net/franklin/ worldlink.jpgborder =0> & nbsp;< / span> Sec。 17.& nbsp; & nbsp; & nbsp;改善人行道和路缘。< / DIV> 
" P>< Font Face =Times New Roman  Said City有权力通过刑事条例规定建筑，改善或修理任何人行道或路边，并声明有缺陷的人行道或路边公共滋扰。< / FONT> 
< / P> 
< / A> 
  

这是要求的，不知道它会有多大的帮助。

解决方案

段头不在段落内;它在锚内。在段落中添加 page-break-inside：avoid; 只会阻止段落中的内容被分割。它不适用于段落的兄弟。

因此，如果你不希望段头和段落拆分，则需要添加<$ c $

 
 css prettyprint-override>  a {
 page-break-inside：avoid; 
} 
  

I’m trying to use wkhtmltopdf to turn this page into a (somewhat) nice-looking PDF document:

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

I’m using the following code so far:

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

This mostly correct, and I’m getting better results than at first. But the page breaks are still not all correct. The problem trees look like this

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

Now, I’ve got the CSS where it will avoid breaking a paragraph where possible (there are a few more-than-one-page paragraphs, but the rest are fine). However, it will still occasionally put a section header at the bottom of a page, then move the paragraph to the next — and if it does this, it should also move the section header with it, rather than splitting them.

Is this a solvable problem in CSS3?

[edit]

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

This was requested, not sure how helpful it will be.

解决方案

The section header isn't inside the paragraph; it's inside the anchor. Adding page-break-inside: avoid; to the paragraph only prevents the content within the paragraph from being split up. It doesn't apply to siblings of the paragraph.

Therefore, if you don't want the section header and paragraph to split, you need to add page-break-inside: avoid; to the parent (aka, the anchor), not the paragraph.

a {
  page-break-inside: avoid;
}

这篇关于什么是正确的方法来做CSS以避免分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！