Impressão CSS: Evitando DIVs cortados ao meio entre páginas?

Estou escrevendo um plug-in para um software que pega uma grande coleção de itens e os coloca no HTML em um WebView no Cocoa (que usa o WebKit como seu renderizador, portanto, basicamente, você pode assumir que esse arquivo HTML está sendo aberto em Safári).

Os DIVs produzidos são de altura dinâmica, mas não variam muito. Eles geralmente têm cerca de 200 pixels. De qualquer forma, com cerca de seiscentos desses itens por documento, estou tendo um tempo muito difícil para imprimi-lo. A menos que eu tenha sorte, há uma entrada cortada ao meio na parte inferior e superior de todas as páginas, e isso dificulta muito o uso das impressões.

Tentei quebra de página antes, quebra de página depois, quebra de página interna e combinações dos três sem sucesso. Eu acho que o WebKit pode não renderizar corretamente as instruções, ou talvez seja minha falta de entendimento de como usá-las. De qualquer forma, preciso de ajuda. Como evitar o corte pela metade dos meus DIVs durante a impressão?

Isso deve funcionar:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Observe o suporte atual do navegador (12-03-2014) :

• Chrome - 1.0 ou superior
• Firefox (Gecko) - 19.0 ou superior
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1.3 ou superior (312)

Apenas uma solução parcial: a única maneira de fazer isso funcionar no IE era agrupar cada div em sua própria tabela e definir a quebra de página na tabela para evitar.

page-break-inside: avoid; me deu problemas ao usar o wkhtmltopdf.

Para evitar quebras no texto, adicione display: table;ao CSS da div que contém o texto.

Espero que isso funcione para você também. Obrigado JohnS.

quebra de página: evitar; definitivamente não funciona no webkit, na verdade, é um problema conhecido há mais de 5 anos https://bugs.webkit.org/show_bug.cgi?id=5097

No que diz respeito à minha pesquisa, não existe um método conhecido para fazer isso (estou trabalhando para descobrir meu próprio hack)

O conselho que posso dar é: para realizar essa funcionalidade no FF, envolva o conteúdo que você não quer quebrar dentro de um DIV (ou qualquer contêiner) com estouro: auto (tenha cuidado para não causar barras de rolagem estranhas) aparecer dimensionando o recipiente muito pequeno).

Infelizmente, o FF é o único navegador em que consegui fazer isso e o webkit é o que mais me preocupa.

Os valores possíveis para quebra de página depois são: auto, always, avoid, left, right

Acredito que você não pode usar a propriedade quebra de página em elementos absolutamente posicionados.

Eu tenho o mesmo problema, mas ainda não há solução. A quebra de página não funciona nos navegadores, mas no Opera. Uma alternativa pode ser usar quebra de página após: evitar; em todos os elementos filhos da div para manter juntos ... mas nos meus testes, o atributo evitar-não funciona, por exemplo. no Firefox ...

O que funciona em todos os navegadores ppulares são quebras de página forçadas usando, por exemplo. quebra de página: sempre

Uma armadilha que encontrei foi um elemento pai com o atributo 'overflow' definido como 'auto'. Isso nega os elementos div filhos com o atributo de quebra de página na versão impressa. Caso contrário, page-break-inside: avoidfunciona bem no Chrome para mim.

No meu caso, eu consegui corrigir as dificuldades de quebra de página no webkit definindo meus divs selecionados como página-quebra-dentro: evitar e também configurando todos os elementos para exibir: inline. Então assim:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

Parece que as propriedades de quebra de página só podem ser aplicadas a elementos embutidos (no webkit). Tentei aplicar apenas display: inline aos elementos específicos que eu precisava, mas isso não funcionou. A única coisa que funcionou foi a aplicação inline a todos os elementos. Eu acho que é um dos grandes contêineres que está atrapalhando as coisas.

Talvez alguém possa expandir isso.

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Para todos os novos navegadores, esta solução funciona. Consulte caniuse.com/#search=page-break-inside

page-break-inside: avoid;nem sempre parece funcionar. Parece levar em consideração a altura e o posicionamento dos elementos do contêiner.

Por exemplo, inline-blockelementos mais altos que a página serão cortados.

Consegui restaurar a page-break-inside: avoid;funcionalidade de trabalho identificando um elemento de contêiner display: inline-blocke adicionando:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Espero que isso ajude as pessoas que reclamam que "a quebra de página não funciona".