打印CSS - 避免切割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; ?> 

有谁知道我怎么能避免这种切？

感谢

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

Answer 2

我认为这个问题是在浮动：左..这是一个大问题，但你可以找到一些技巧here

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> 

Answer 4

尝试设置page-break-inside到avoid：

div { 
    page-break-inside: avoid; 
}