相关疑难解决方法(0)

在编写打印样式表时,有没有办法确保图像始终只在一个页面上,而不是跨越多个页面.图像比页面小得多,但根据文档流程,它们最终位于页面底部并被分割.我所看到的行为的一个例子如下:

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

我想要什么

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | | …

我在页面上有一堆段落:

<p> ... </p>
<p> ... </p>
<p> ... </p>

这些段落的CSS规则是:

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

现场演示: http ://jsfiddle.net/KE9je/2/show/

如果我page-break-inside正确理解了属性,上面应该确保在两个页面之间没有分割段落.(段落显示在"当前"页面上,或者如果它不完全适合,则会移到下一页.)

这在Chrome中似乎不起作用.打开演示,右键单击页面,选择"打印...".您将看到打印预览 - 第五段在第1页和第2页之间分开.

我究竟做错了什么？如何在Chrome中完成此工作？

我有一个HTML 4.01/CSS 2.1文档,其中包含一个H3标题,后跟一个短(一行)段落块,然后是一个包含多个项目的无序列表:

<h3>Heading!</h3>

<p>Some things:</p>

<ul>
  <li>Thing one</li>
  <li>Thing B</li>
  <li>Thing 4</li>
</ul>

我的问题是,当我打印文档(或使用PDF渲染它wkhtmltopdf)时,有时会在标题之后,在段落之前发生分页,这看起来很傻.

有没有办法规定在标题后应立即避免分页？(我不反对HTML5/CSS3解决方案,如果这大大简化了事情.)

注意:以下建议,我尝试使用CSS属性page-break-after: avoid.但是,这在任何基于WebKit或Mozilla的浏览器中都不起作用.

我试图以page-break-inside: avoid一种使用多行flexbox布局(带flex-wrap: wrap)的形式工作.目标只是避免在打印时打破形式问题.

这适用于单线flexbox或没有flexbox.查看http://jsfiddle.net/MartijnR/nSE3P/1/show/的打印预览 (注意不应用flexbox类)

但是,当使用多行flexbox时,它似乎忽略了page-break-inside: avoidcss规则.请参阅http://jsfiddle.net/MartijnR/nSE3P/2/show/的打印预览 (注意我将flexbox类添加到section元素中)

<form>
   <section class="flexbox">
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
        <!-- etc -->
        <label class="flex-100">
            <input type="text" />
        </label>
        <label class="flex-100">
            <input type="text" />
        </label>
    </section>
</form>

body, div, article, section, label {
    position: relative;
}
.flexbox {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: …

我正在研究Symfony2项目,以便从HTML视图生成PDF.以下是来自config.yml

knp_snappy:
pdf:
    enabled:    true
    binary:     /path/to/my/wkhtmltopdf
    options:
        no-stop-slow-scripts: ~
        enable-javascript: ~
        use-xserver: ~
        page-size: A4
        dpi: 300

现在我想知道DIV是否在页面边缘重叠,如果是这样,在DIV之前添加分页符.它目前显示如下.

我试图获得DIV的高度并将其与页面高度进行比较,但它不起作用.

是否有任何解决方案可以知道DIV何时重叠或在某些内容重叠时自动中断页面？

什么是最有用的media="print",跨浏览器兼容的CSS属性？

我认为我们有这5个属性用于打印特定.

1. 分页符,前
2. 分页,后
3. 分页,内
4. 寡妇
5. 孤儿

请解释何时何地使用这些？哪些是跨浏览器兼容的？什么是其他常见的CSS属性可用于打印,除了display:none？

请参阅以下小提琴： https://jsfiddle.net/b6bpzsg7/

它由 3 个投资组合项目组成，这些项目是带有类舷窗的 div，它们只有左右填充以抵消邻居的影响。

<div class="col-md-4 porthole">
    <div class="portbox text-center">
         <div class="portplace">
            <div>Coming soon</div>
          </div>
          <header>Second</header>
     </div>
</div>

内部 div 有一个 portbox 类，我可以在 chrome 开发人员中看到它不会垂直扩展以占据它周围的所有舷窗。portbox 没有内边距、边框或边距

在 portbox 中，有一个带有 portplace 类的占位符 div，周围的边距为 15 像素，顶部和底部的填充量为 30 像素。在 chrome 开发人员中，我看到顶部边距从封闭端口箱的外部延伸到外部舷窗的顶部边距。

有人可以启发我吗？

编辑

   .portrow {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 10px;
        background-color: #888;
    }

    .porthole {
        padding: 0px 15px 0px 15px;
        overflow: auto;
    }   

    .portbox {
        border-width: 1px;
        border-color: #000;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, …