Impression CSS: éviter les DIVs coupés en deux entre les pages?

J'écris un plug-in pour un logiciel qui prend une grande collection d'éléments et les place dans HTML dans une WebView dans Cocoa (qui utilise WebKit comme moteur de rendu, donc en gros, vous pouvez supposer que ce fichier HTML est ouvert dans Safari).

Les DIV qu'elle fait sont de hauteur dynamique, mais elles ne varient pas trop. Ils sont généralement autour de 200 pixels. Quoi qu'il en soit, avec environ six cents de ces éléments par document, j'ai beaucoup de mal à l'imprimer. Sauf si j'ai de la chance, il y a une entrée coupée en deux en bas et en haut de chaque page, ce qui rend l'utilisation des impressions très difficile.

J'ai essayé le saut de page avant, le saut de page après, le saut de page à l'intérieur et les combinaisons des trois en vain. Je pense que WebKit peut ne pas rendre correctement les instructions, ou peut-être que je ne comprends pas comment les utiliser. En tout cas, j'ai besoin d'aide. Comment puis-je empêcher la réduction de moitié de mes DIVs lors de l'impression?

Cela devrait fonctionner:

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

Veuillez noter la prise en charge actuelle du navigateur (12-03-2014) :

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

Seulement une solution partielle: La seule façon pour que cela fonctionne pour IE était d'envelopper chaque div dans sa propre table et de définir le saut de page à l'intérieur de la table pour éviter.

page-break-inside: avoid; m'a donné du mal à utiliser wkhtmltopdf.

Pour éviter les ruptures dans le texte, ajoutez display: table;au CSS du div contenant du texte.

J'espère que cela fonctionne aussi pour vous. Merci JohnS.

saut de page à l'intérieur: éviter; ne fonctionne certainement pas dans webkit, en fait est un problème connu depuis plus de 5 ans maintenant https://bugs.webkit.org/show_bug.cgi?id=5097

En ce qui concerne mes recherches, il n'y a pas de méthode connue pour y parvenir (je travaille à trouver mon propre hack)

Le conseil que je peux vous donner est, pour accomplir cette fonctionnalité dans FF, envelopper le contenu que vous ne t; voulez jamais casser à l'intérieur d'un DIV (ou de n'importe quel conteneur) avec débordement: auto (faites juste attention à ne pas provoquer d'étranges barres de défilement apparaître en dimensionnant le récipient trop petit).

Malheureusement, FF est le seul navigateur dans lequel j'ai réussi à accomplir cela, et le webkit est celui qui m'inquiète le plus.

Les valeurs possibles pour le saut de page sont les suivantes: auto, always, avoid, left, right

Je crois que vous ne pouvez pas utiliser cette propriété de saut de page sur des éléments absolument positionnés.

J'ai le même problème mais pas encore de solution. le saut de page ne fonctionne pas sur les navigateurs mais sur Opera. Une alternative pourrait être d'utiliser le saut de page après: éviter; sur tous les éléments enfants du div à garder ensemble ... mais dans mes tests, l'attribut éviter ne fonctionne pas par exemple. dans Firefox ...

Ce qui fonctionne dans tous les navigateurs ppular, ce sont les sauts de page forcés en utilisant par exemple. saut de page: toujours

Un écueil que j'ai rencontré était un élément parent ayant l'attribut 'overflow' réglé sur 'auto'. Cela annule les éléments div enfants avec l'attribut page-break-inside dans la version imprimée. Sinon, cela page-break-inside: avoidfonctionne bien sur Chrome pour moi.

Dans mon cas, j'ai réussi à résoudre les problèmes de saut de page dans webkit en définissant mes divs sélectionnés sur page-break-inside: éviter, et en définissant également tous les éléments à afficher: en ligne. Alors comme ça:

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

}

Il semble que les propriétés de saut de page ne peuvent être appliquées qu'aux éléments en ligne (dans le webkit). J'ai essayé d'appliquer uniquement display: inline aux éléments particuliers dont j'avais besoin, mais cela n'a pas fonctionné. La seule chose qui a fonctionné était l'application en ligne à tous les éléments. Je suppose que c'est l'un des grands conteneurs de conteneurs qui gâche les choses.

Peut-être que quelqu'un pourrait développer cela.

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

Pour tout nouveau navigateur, cette solution fonctionne. Voir caniuse.com/#search=page-break-inside

page-break-inside: avoid;ne semble pas toujours fonctionner. Il semble tenir compte de la hauteur et du positionnement des éléments du conteneur.

Par exemple, les inline-blockéléments plus hauts que la page seront tronqués.

J'ai pu restaurer la page-break-inside: avoid;fonctionnalité de travail en identifiant un élément conteneur avec display: inline-blocket en ajoutant:

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

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

J'espère que cela aide les gens qui se plaignent que "le saut de page ne fonctionne pas".