web-dev-qa-db-fra.com

Impression CSS: éviter les DIV divisées entre deux pages?

J'écris un plug-in pour un logiciel qui prend une grande collection d'éléments et les insère au format HTML dans une vue Web dans Cocoa (qui utilise WebKit comme moteur de rendu. Vous pouvez donc en principe supposer que ce fichier HTML est ouvert Safari).

Les DIV qu'il fabrique ont une hauteur dynamique, mais elles ne varient pas trop. Ils sont généralement autour de 200px. Quoi qu'il en soit, avec environ six cents de ces éléments par document, j'ai du mal à le faire imprimer. À moins que je ne sois chanceux, il y a une entrée coupée en deux en bas et en haut de chaque page, ce qui rend très difficile l'utilisation de l'impression.

J'ai essayé le saut de page avant, le saut de page après, le saut de page intérieur et des combinaisons des trois sans résultat. Je pense que c'est peut-être WebKit qui ne rend pas 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 éviter la réduction de moitié de mes DIV lors de l'impression?

csscocoaprintingpage-break
173
joeylange

Cela devrait fonctionner:

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

Veuillez noter support actuel du navigateur (12-03-2014) :

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

Seule une solution partielle: la seule façon pour que cela fonctionne fonctionne pour IE était d’envelopper chaque div dans sa propre table et de définir le saut de page sur la table à éviter.

21
NotMe

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

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

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

9
Bonjowi

saut de page à l'intérieur: à éviter; ne fonctionne vraiment pas dans webkit, en fait, c'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 bidouillage)

Le conseil que je peux vous donner est, pour accomplir cette fonctionnalité dans FF, envelopper le contenu que vous ne voulez pas fendre dans un DIV (ou un conteneur) avec un débordement: auto (faites juste attention à ne pas faire montrer en dimensionnant le conteneur trop petit).

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

5
Bob Monteverde

J'ai le même problème mais pas de solution pour le moment. page-break-inside ne fonctionne pas sur les navigateurs, mais sur Opera. Une alternative pourrait consister à utiliser page-break-after: Avoid; sur tous les éléments enfants de la div à garder ensemble ... mais dans mes tests, l'éviter-Attribut ne fonctionne pas, par exemple. dans Firefox ...

Ce qui fonctionne dans tous les navigateurs ppulaires sont des sauts de page forcés utilisant par exemple. page-break-after: toujours

5
Bjoern

Les valeurs possibles pour le saut de page après sont: auto, always, avoid, left, right

Je pense que vous ne pouvez pas utiliser cette propriété de saut de page sur des éléments positionnés de manière absolue.

5
DOK

Un écueil que j'ai rencontré est un élément parent dont l'attribut "débordement" est défini sur "auto". Cela annule les éléments div enfant avec l'attribut page-break-inside dans la version imprimée. Autrement, page-break-inside: avoid fonctionne bien sur Chrome pour moi.

3
Eric D.

Dans mon cas, j'ai réussi à résoudre les difficultés de saut de page dans webkit en définissant mes divs sélectionnés sur page-break-inside: eviter et en définissant tous les éléments à afficher: inline. 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 puissent être appliquées qu'aux éléments en ligne (dans le kit Web). J'ai essayé d'appliquer uniquement display: inline aux éléments dont j'avais besoin, mais cela n'a pas fonctionné. La seule chose qui a fonctionné a été d'appliquer en ligne à tous les éléments. Je suppose que c’est l’un des grands conteneurs qui dérange.

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

2
Waltur Buerk
@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

0
Naun Lemos