打印样式表 - 避免切割 DIV。

Question

我正在开发一个生成条形码的应用程序，我想打印它们，但在某些页面上，条形码div会被裁剪。

CSS：

<style type="text/css">
    * {
        margin:0px;
    }
    #cod {
        width: 180px;
        height: 150px;
        padding: 10px;
        margin: 10px;
        float: left;
        border: solid black 1px;
        text-align: center;
        display: block;
    }

</style>

代码：

<? foreach ($this->ouvintes as $ouvinte): ?>
    <div id="cod">
        <p><?= $ouvinte->nome ?></p>
        <p><?= $ouvinte->instituicao ?></p>
        <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
        <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
    </div>
<? endforeach; ?>

有谁知道我如何避免这种切割？

谢谢

- dextervip

Answer 1

尝试一下 page-break-after / page-break-before CSS 属性如何？

你可以这样设置，每显示9个条形码就在它们之后进行分页：

<? 
$i = 0;
foreach ($this->ouvintes as $ouvinte):
    $i++;
    $pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : '';
?>
    <div id="cod"<?= $pageBreakStyle ?>>
        <p><?= $ouvinte->nome ?></p>
        <p><?= $ouvinte->instituicao ?></p>
        <p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
        <p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
    </div>
<? endforeach; ?>

- brianreavis

---

嗨，谢谢您的回复。我之前尝试过这样做，但只有第一个中断起作用，其他的都不起作用。我不知道为什么... - dextervip

Answer 2

我认为问题出在float:left上...这是一个大问题，但你可以在这里找到一些技巧。

- fain182

Answer 3

我遇到了一个类似的问题......唯一有效的解决方案是将条形码放在表格中......这是因为多页内容只有通过表格才能正常工作（而不会切掉内容或出现其他问题）。

可以试试像这样的代码：

<table>
<? foreach ($this->ouvintes as $ouvinte): ?>
    <tr id="cod">
        <td><?= $ouvinte->nome ?></td>
        <td><?= $ouvinte->instituicao ?></td>
        <td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td>
        <td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td>
    </tr>
<? endforeach; ?>
</table>

- Mission

Answer 4

尝试将page-break-inside设置为avoid:

div {
    page-break-inside: avoid;
}

- mesqueeb