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


199

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?


Fournissez un exemple de document avec le problème que vous voyez et peut-être que nous pouvons vous aider!
X-Istence

J'ai répondu à une question très similaire sur la façon d'éviter de couper les divs en deux ici: stackoverflow.com/a/14348953/1026459
Travis J

1
Remarque: Cette propriété ne peut PAS être utilisée sur des éléments positionnés de manière absolue (et apparemment également sur des blocs en ligne).
Ujjwal Singh

Réponses:


336

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)

7
Ça devrait marcher. Mais ce n'est pas le cas. Voir en.wikipedia.org/wiki/… pour la prise en charge du navigateur.
Greg

1
Fonctionne dans Safari 6 :) qui est en version développeur maintenant
Linus Unnebäck

1
Fonctionne dans Chrome V 27.0.1453.116
T. Brian Jones

4
Fonctionne également dans Netscape. Merci!

2
Pourquoi avez-vous besoin d'une impression sur support? Est-ce la même chose si l'impression sur support n'est pas utilisée et que la règle est appliquée directement sur div?
FrenkyB

21

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.


@easwee: merci. Le downvote s'est produit en même temps que inquisitive_web_developer a mis une prime sur la question. Je suppose qu'il / elle n'a pas aimé. ;)
NotMe

3
Belle! Tu es un champion; J'ai cherché un moyen de le faire dans wkhtmltopdf , qui ne prend pas page-break-inside: avoid;correctement en charge . Enfin, j'ai une solution de contournement décente.
Dave

2
Testé page-break-inside dans wkhtmltopdf en version 0.11 et ça marche.
cmc

Testé avec wkhtmltopdf 0.12.2.1. Les tables de div à l'intérieur ne sont plus nécessaires, mettez simplement le saut de page à l'intérieur: évitez le sélecteur de div. Travaux!
Paul Marti

12

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.


J'avais presque abandonné les espaces inexpliqués qui apparaissaient ici et là lors de l'utilisation page-break-before: always;sur les <div>éléments. Recherche à travers un océan de messages SO, d'articles, de documents officiels et ainsi de suite. Rien n'a aidé. Mais vous, mon ami, êtes finalement venu avec ce dont j'avais exactement besoin! Je ne peux pas vous remercier assez, mec !! J'aimerais pouvoir te procurer un café au moins, beaucoup d'amour de l'Inde!
Jay Dadhania

6

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.


5

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.


1
Apparemment, cela ne fonctionne pas non inline-blockplus
Ujjwal Singh

5

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


Cela devrait fonctionner avec Webkit. Cependant, vous devrez peut-être ajouter quelques divisions supplémentaires conçues pour l'impression avec saut de page: toujours; après environ une demi-douzaine de vos divs réguliers.
ʍǝɥʇɐɯ

3

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.


2

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.


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


1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.