web-dev-qa-db-fra.com

page-break-inside ne fonctionne pas dans Chrome?

J'ai un tas de paragraphes sur une page:

<p> ... </p>
<p> ... </p>
<p> ... </p>

La règle CSS pour ces paragraphes est la suivante:

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

Démo en direct:http://jsfiddle.net/KE9je/2/show/

Si je comprends bien la propriété page-break-inside, la procédure ci-dessus doit garantir qu'aucun paragraphe n'est divisé entre deux pages. (Un paragraphe est affiché sur la page "actuelle" ou, s'il ne s'adapte pas complètement, il est déplacé vers la page suivante.)

Cela ne semble pas fonctionner dans Chrome. Ouvrez la démo, cliquez avec le bouton droit de la souris sur la page, choisissez "Imprimer ...". Vous verrez un aperçu avant impression - le cinquième paragraphe est divisé entre la page 1 et la page 2.

Qu'est-ce que je fais mal? Comment puis-je faire fonctionner cela dans Chrome? 

htmlcssgoogle-chrome
33
Šime Vidas

En fait, FONCTIONNE dans Chrome et la solution est vraiment idiote !!

Le parent et l'élément sur lequel vous voulez contrôler la rupture de page doivent être déclarés comme:

position: relative;

Découvrez ceci violon (ou dans plein écran )

Ceci est vrai pour:

page-break-before
page-break-after
page-break-inside

Cependant, le contrôle de page-break-inside dans Safari ne fonctionne pas (au moins en 5.1.7)

J'espère que ça aide!!!

35
Peter

Je sais que c’est une vieille question, mais Chrome a changé depuis sa réponse, ce qui peut aider.

Il semble que page-break-inside:avoid fonctionne dans Chrome en fonction de la hauteur de l'élément. Par conséquent, si vous faites flotter un tas d'éléments dans un div, page-break-inside:avoid ne fonctionnera pas.

Il est possible de contourner cela en définissant explicitement la hauteur que l'élément que vous ne voulez pas décomposer. Exemple jQuery: 

$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());
3
JSP64

Selon SitePoint, Chrome n'est pas pris en charge ici, seulement Opera (et IE 8 buggy) ...

http://reference.sitepoint.com/css/page-break-inside

Autres références:

http://www.webdevout.net

http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/

Fils de débordement de pile:

Prise en charge inter-navigateur de `page-break-inside: Avoid;`

"page-break-inside: evitez" - ne fonctionne pas

Sauts de page d'impression Google Chrome

Quels navigateurs prennent en charge la manipulation des sauts de page à l'aide de CSS et de l'élément page-break-inside?

Forum Google Chrome:

http://www.google.com/support/forum

Je ne publierai pas le lien W3Schools (en raison de son manque de fiabilité générale), mais ils indiquent également qu'il n'est pris en charge que par Opera, quelle que soit sa valeur.

3
Sparky

Cela a fonctionné mieux pour moi:

.no-page-break {
   display: inline-block;
   width: 100%;
   page-break-inside: avoid;
}

Vous pouvez également spécifier la height si nécessaire.

2
Ivan Rogic

Je viens de tester cela avec un paragraphe plus grand dans IE9, Chrome 14 et Firefox 7, et il semble que seul IE9 fonctionne comme prévu. Vous devrez peut-être ajouter manuellement des sauts de page à l’endroit où vous le souhaitez. 

page-break-after:always

Bien sûr, ce n’est bon que si vous connaissez la longueur du contenu à l’avance.

1
magritte

Cela fonctionne pour moi, comme ceci:

.print{position: absolute;}
.print p{page-break-inside: avoid}
0
Thiago Leviatan

vérifie si l'affichage parent (ou conteneur de niveau supérieur) est flex; retirez-le et essayez à nouveau; cela fonctionne pour moi en chrome 71

0
2tuzi

Ce qui a fonctionné pour moi (à la fois dans FFox et Chrome)

.container {
  column-gap: .4em;
  columns: 3;
  padding: .4em;
}

.contained {
  page-break-before: avoid;
  page-break-inside: avoid;
  page-break-after: always;
}

Et c'est tout ; Je n'avais pas besoin de position.

0
yPhil

Je me bats avec cela depuis un certain temps et, en plus de suivre les conseils des autres réponses, je devais m'assurer que l'élément et tous les éléments parents avaient le style Display: block;.

0
Ryan Searle

Pour les Bootstrappers, sachez que page-break-inside ou d’autres peuvent ne pas fonctionner (fortement) sous container ou row ou d’autres classes de bootstrap même si vous modifiez manuellement la propriété position. Lorsque j'exclus container et row, cela a fonctionné à merveille!

0
ninbit