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


199

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?


Forneça um documento de amostra com o problema que você está vendo e talvez possamos ajudar!
X-Istence

Eu respondi uma pergunta muito semelhante sobre como evitar divs corte pela metade aqui: stackoverflow.com/a/14348953/1026459
Travis J

1
Nota: Esta propriedade NÃO pode ser usada em elementos absolutamente posicionados (e aparentemente também em blocos embutidos).
Ujjwal Singh

Respostas:


336

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)

7
Ele deve trabalhar. Mas isso não acontece. Consulte en.wikipedia.org/wiki/… para obter suporte ao navegador.
Greg

1
Funciona no Safari 6 :), que está na pré-visualização do desenvolvedor agora
Linus Unnebäck

1
Funciona no Chrome V 27.0.1453.116
T. Brian Jones

4
Também funciona no Netscape. Obrigado!

2
Por que você precisa de mídia impressa? É o mesmo se a impressão de mídia não for usada e a regra for aplicada diretamente na div?
FrenkyB

21

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.


@easwee: obrigado. O voto negativo aconteceu ao mesmo tempo inquisitive_web_developer colocou uma recompensa na questão. Meu palpite é que ele / ela não gostou. ;)
NotMe 17/05

3
Lindo! Você é um campeão; Eu estive procurando uma maneira de fazer isso no wkhtmltopdf , que não suporta page-break-inside: avoid;corretamente. Finalmente, tenho uma solução decente.
Dave

2
Teste de quebra de página testado em wkhtmltopdf na versão 0.11 e funciona.
Cmc #

Testado com wkhtmltopdf 0.12.2.1. As tabelas Div Div não são mais necessárias, basta inserir a quebra de página: evite no seletor div. Trabalho!
Paul Marti

12

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.


Eu tinha quase desistido de espaços inexplicáveis que apareceram aqui e ali quando se utiliza page-break-before: always;em <div>elementos. Pesquisado em um oceano de SO Publicações, artigos, documentos oficiais e outros enfeites. Nada ajudou. Mas você, meu amigo, finalmente veio com o que eu exatamente precisava! Não posso agradecer o suficiente, cara !! Eu gostaria de conseguir um café para você, pelo menos, muito amor da Índia!
Jay Dadhania 17/09/18

6

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.


5

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.


1
Aparentemente, ele não funciona em inline-blocks quer
Ujjwal Singh

5

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


Isso deve funcionar com o Webkit. No entanto, pode ser necessário incluir algumas divs extras estilizadas para impressão com quebra de página: sempre; depois de meia dúzia de seus divs regulares.
ʍǝɥʇɐɯ

3

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.


2

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.


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


1

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.