J'essaie de faire en sorte que Google Chrome fasse des sauts de page.
On m'a dit via un tas de sites web que page-break-after: always; est valide dans chrome mais je n'arrive pas à le faire fonctionner, même avec un exemple très simple. Existe-t-il un moyen de forcer un saut de page lors de l'impression dans chrome ?
J'ai utilisé l'approche suivante avec succès dans tous les principaux navigateurs, y compris Chrome :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>Il s'agit d'un exemple simplifié. Dans le code réel, chaque div de page contient beaucoup plus d'éléments.
@Mike Merci d'avoir résolu le problème pour moi. Je ne sais pas pourquoi un br ne fonctionne pas alors qu'un div le fait, mais il s'agit néanmoins d'un changement facile.
Cela fonctionne lorsque vous essayez d'utiliser avec la page parent, mais ne fonctionne pas lorsque vous imprimez à partir de l'iframe (dans chrome, bien sûr).
En fait, il manque un détail dans la réponse retenue comme acceptée (de Phil Ross).....
il FAIT fonctionnent dans Chrome, et la solution est vraiment idiot ! !
Le parent et l'élément sur lequel vous voulez contrôler le saut de page doivent tous deux être déclarés comme :
position: relativeRegardez ce violon : http://jsfiddle.net/petersphilo/QCvA5/5/show/
Ceci est vrai pour :
page-break-before
page-break-after
page-break-insideCependant, le contrôle du saut de page à l'intérieur de Safari ne fonctionne pas (en 5.1.7, du moins).
J'espère que cela vous aidera !!!
PS : La question ci-dessous a mis en évidence le fait que les versions récentes de Chrome ne respectent plus ce principe, même avec l'astuce position : relative ;. Cependant, elles semblent respecter :
-webkit-region-break-inside: avoid;voir ce violon : http://jsfiddle.net/petersphilo/QCvA5/23/show
donc je suppose que nous devons ajouter ça maintenant...
J'espère que cela vous aidera !
Cela dépend de la version de WebKit utilisée si cela fonctionne ou non dans Chrome. Vous avez dit vous-même que cela ne fonctionne pas dans Safari 5.1.7, donc je ne pense pas que ce soit idiot du tout. La version de WK dans ce qu'ils ont testé peut être différente de celle que vous avez testée.
Cette page ne fonctionne pas dans Chrome 26.0.1410.65, j'obtiens 3 pages et la dernière ne comporte qu'un seul mot). J'ai également essayé de m'assurer que l'élément auquel je veux appliquer la règle et son parent ont la position:relative sur ma propre page, mais le saut de page n'est toujours pas ajouté à l'impression. S'agit-il d'une fonctionnalité qui apparaît et disparaît dans Chrome ?
Vous avez raison.... cela ne semble pas fonctionner dans les versions récentes de chrome ; cependant, vous pouvez le remplacer par : -webkit-region-break-inside : avoid ; (voir ceci : jsfiddle.net/QCvA5/22/show )
Je voulais juste noter ici que Chrome ignore également les paramètres css page-break-* dans les divs qui ont été flottés.
Je soupçonne qu'il y a une bonne justification pour cela quelque part dans la spécification css, mais je me suis dit que noter cela pourrait aider quelqu'un un jour ;-)
Autre remarque : IE7 ne peut pas reconnaître les paramètres de saut de page sans une hauteur explicite sur l'élément de bloc précédent :
Probablement parce que le fait de flotter un élément le sort du flux du document de la même manière que le fait le positionnement absolu. Les éléments avec position:absolute ne fonctionnent pas avec page-break-*.
De plus, il ne devrait pas y avoir d'éléments flottants ou positionnés de manière absolue parmi tous les parents de l'élément avec un style de saut de page. J'avais un parent bootstrap "col-xs-12", lorsque j'ai explicitement défini "float : none" à celui-ci, le saut de page a commencé à fonctionner !
J'ai eu un problème similaire à celui-ci mais j'ai fini par trouver la solution. J'avais overflow-x : hidden ; appliqué à la balise <html> de sorte que, quoi que je fasse en dessous dans le DOM, il ne permettra jamais les sauts de page. En revenant à overflow-x : visible ; ça a bien marché.
J'espère que cela aidera quelqu'un d'autre.
J'ai moi-même ce problème - mes sauts de page fonctionnent dans tous les navigateurs sauf Chrome - et j'ai pu l'isoler jusqu'à ce que l'élément page-break-after se trouve dans une cellule de tableau. (Anciens modèles hérités dans le CMS).
Apparemment, Chrome ne respecte pas les propriétés page-break-before ou page-break-after dans les cellules de tableau. Cette version modifiée de l'exemple de Phil place donc les deuxième et troisième titres sur la même page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>La mise en œuvre de Chrome est (douteusement) autorisée par la spécification CSS - vous pouvez en savoir plus ici : http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Il semble que cela ait été discuté relativement récemment (février 2014) (sur un vieux ticket de bug de 2005) sur le webkit bug tracker. bugs.webkit.org/show_bug.cgi?id=5097