page-break-inside ne fonctionne pas sous Chrome?
J'ai un tas de paragraphes sur une page:
<p> ... </p>
<p> ... </p>
<p> ... </p>
La règle CSS pour ces alinéas est:
p {
margin: 20px 0;
page-break-inside: avoid;
}
Démo Live: http://jsfiddle.net/KE9je/2/show/
Si je comprends le page-break-inside
bien correctement, le dessus doit veiller à ce qu'aucun paragraphe est divisé entre deux pages. (Un paragraphe est affichée sur le "courant" de la page, ou si elle ne rentre pas complètement, il est déplacé à la page suivante.)
Cela ne semble pas fonctionner dans le navigateur Chrome. Ouvrir la démo, cliquez-droit sur la page, choisissez l'option "Imprimer...". Vous verrez un aperçu avant impression - le cinquième alinéa est divisé entre la page 1 et 2.
Ce que je fais mal? Comment puis-je faire ce travail dans Chrome?
- La version de google Chrome, vous êtes en cours d'exécution? Votre jsFiddle fonctionne pour moi. Je suis sur la version 14.0.835.202 m.
- J'ai la même version.
- J'ai mis à jour ma question avec une image. Ce paragraphe s'appuie sur le 2. page dans google Chrome?
- Vidas sur mon 14.0.835.202 m Chrome, il fonctionne très bien..
- Ouais, mais jamais l'esprit, je pense que mes paramètres d'impression sont différentes de la vôtre, et votre exemple monté sur la page 1 pour moi. J'ai fait le point de plus grand et de voir le même problème que toi maintenant.
Vous devez vous connecter pour publier un commentaire.
En fait, il NE travail dans Chrome, et la solution est vraiment idiot!!
À la fois le parent et l'élément sur lequel vous voulez à la page de contrôle-la rupture doit être déclarée comme suit:
Découvrez ce violon (ou dans plein écran)
Cela est vrai pour:
Cependant, le contrôle de
page-break-inside
dans Safari ne fonctionne pas (en 5.1.7, au moins)J'espère que cela aide!!!
page-break-inside
. Mon démo originale (à partir de ma réponse) travaille maintenant dans le Chrome:D
page-break-inside
fonctionne dans Chrome (tant que vous ne déclarez pasposition: absolute;
sur l'élément ou de sa mère, mais il ne fonctionne pas dans Safari (au moins 5.versions x) - Bravo!position: relative;
position: relative; page-break-inside: avoid; display: block;
pour chaque élément le chemin parent jusqu'à ce qu'il a résolu le problème. J'ai progressivement supprimées une fois que je l'ai résolu, pour les appliquer uniquement là où ils besoin pour être appliquéedisplay: flex
ne prend pas en chargepage-break-inside
propriétés. Changer le type d'affichage àblock
a fonctionné pour moi!position: relative
etdisplay: block
à tous les éléments avec leurs parents jusqu'à labody
et ce n'travail. Chrome est le nouvel IE. :-/ edit: ce n'travail était de mettre enposition: relative !important
etdisplay: block !important
à l'ensemble de ces éléments et puis il a travaillé.Ce qui a le mieux fonctionné pour moi:
Vous pouvez également spécifier le
height
si nécessaire.width: 100%;
et cela a fonctionné un RÉGAL! Vous êtes l'homme de laSelon SitePoint, Chrome n'est pas pris en charge ici, seulement à l'Opéra (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/
Débordement de la pile des threads:
Croix-navigateur de la page-break-inside: éviter;`
"page-break-inside: éviter "- ne fonctionne pas
Google Chrome Impression Des Sauts De Page
Qui des navigateurs prennent en charge saut de page manipulation à l'aide de CSS et la page-break-inside élément?
Le Forum Google Chrome:
http://www.google.com/support/forum
Je ne vais pas poster le W3Schools lien (en raison de manque de fiabilité générale), mais ils ont aussi de l'état, c'est uniquement pris en charge à l'Opéra, pour ce qu'il vaut.
page-break-after:
réglage.page-break-after: auto
mais en vain.margin: 0px;
. Voir ma réponse mis à jour.page-break-after: always
pour chaque paragraphe. Qui seraient le résultat d'un seul paragraphe par page...Je sais que c'est une vieille question, mais Chrome a changé depuis qu'il était à l'origine une réponse, et cette option peut vous aider.
Il ressemble
page-break-inside:avoid
fonctionne dans Chrome en fonction de la hauteur de l'élément, donc si vous êtes flottant un tas d'éléments dans un div,page-break-inside:avoid
ne fonctionnera pas.Il est possible de contourner ce problème en définissant explicitement la hauteur de l'élément que vous ne voulez pas rompu. jQuery exemple:
page-break-inside: avoid
fonctionne dans Chrome maintenant. Je ne précisent pas les hauteurs.page-break-inside: avoid
est un div qui a d'autres divs à l'intérieur, et ceux de l'intérieur, les divs sont flotté.float: left/right
?Je viens de testé avec un plus grand paragraphe dans IE9, Chrome 14 et Firefox 7, et il parait qu'IE9 fonctionne comme prévu. Vous pourriez avoir à recourir à l'ajout de sauts de page manuellement où vous le souhaitez avec
Bien sûr, c'est seulement bon pour vous, si vous connaissez le contenu de la longueur à l'avance.
Cela Fonctionne pour moi, comme ceci:
Je me bats depuis un certain temps et ainsi que de suivre les conseils donnés dans les autres réponses que j'ai dû faire en sorte que l'élément et tous les éléments parents avait le style
Display: block;
.display: inline-table
Ce qui a fonctionné pour moi (dans les deux FFox & Chrome, qui est)
Et c'est tout ; je n'ai pas besoin de
position
.vérifier si le parent(ou le conteneur de niveau supérieur) affichage est
flex
; retirez-la et essayez à nouveau;il fonctionne pour moi en chrome71
Pour Bootstrappers, sachez que
page-break-inside
ou d'autres ne peuvent pas (très) travaillent souscontainer
ourow
ou d'autres classes de bootstrap, même si vous changez manuellement la position de la propriété. Quand j'ai exclurecontainer
etrow
, il a travaillé comme un charme!