web-dev-qa-db-fra.com

imprimer la feuille de style, une page imprime et coupe le texte restant

Je travaille sur une liste imprimable d'événements, l'imprimante imprime une page correctement, mais coupe une partie du texte en bas, puis imprime une deuxième page vierge

J'ai essayé tout ce que je sais, mais je suis à perte.

cssprinting
37
mjr

Dans print.css, définissez overflow: visible au lieu de overflow: auto sur div#content. Cela m'a corrigé au moins dans Firefox. La définition de débordement automatique est: "Si le débordement est coupé, une barre de défilement doit être ajoutée pour voir le reste du contenu" - mais les barres de défilement n'existent pas sur les pages imprimées.

Je suppose que puisque la div de contenu doit s'étendre sur plusieurs pages, le navigateur pense "que vous sortez de votre conteneur et que vous devez le couper avec une barre de défilement". Le conteneur dans ce cas est la première page sur laquelle le div de contenu apparaît.

49
CalebD

J'ai trouvé que le paramètre display: inline sur les divisions de conteneurs a également aidé. Certaines de ces excellentes réponses ici ont fonctionné pour moi dans certaines situations tandis que dans d'autres non.

<div class="container">
    <div class="content-cutting-off-here">
        Some long text that gets cut off at the end of the page...
    </div>
</div>

La plupart des utilisateurs définissent des conteneurs pour afficher block ou inline-block. Pour moi, il coupait le texte et le définissait sur inline contournait cela. Cela rend également width et height non pertinents pour la div du conteneur incriminé; que j'ai trouvé gênant lors de l'impression.

@media print {
    .container {
        display: inline;
    }
}

Voici un excellent article qui m'a aidé avec cette solution.

8
Yes Barry

Je sais que c'est une vieille question, mais voici une autre façon plus récente de le faire.

Vérifiez si vous utilisez display: flex; sur l'élément écrêté. C'était le problème pour moi, le régler sur block l'a corrigé.

8
red-X

Si l'un des conteneurs que vous essayez d'imprimer flotte, il sera coupé comme vous le voyez.

Dans votre print.css, assurez-vous de désactiver tous les flottants que vous pouvez sans détruire votre mise en page. C'est une douleur, mais le support du navigateur pour l'impression est au mieux faible.

5
Pat

Utilisez-vous déjà la valeur print pour l'attribut media pour votre feuille de style comme

<link rel="stylesheet" href="print.css" media="print" />

Vous pouvez également utiliser page-break-before attributs pour les éléments que vous ne voulez pas casser.

2
Randell

Je viens de résoudre ce problème dans ie7. C'était dans un projet Sharepoint, qui avait plusieurs cellules de tableau et/ou divs définies à hauteur: 100%. Une fois imprimé, il imprimait de longs formulaires, la première page ou 2 s'imprimait comme d'habitude, puis des pages vierges au lieu du reste.

Dans ma feuille de style d'impression, j'ai défini ces tables et divs sur height: auto, et maintenant ça s'imprime bien.

J'ai un problème différent dans IE8 maintenant. POUAH!

2
betsy

si overflow:visible; ne fonctionne pas, essayez overflow-y:visible;

(j'ai eu body{overflow-y:scroll;}, et body{overflow:visible;} dans print.css pas réécrit ...)

1
buTs

J'ai configuré ma feuille d'impression pour imprimer uniquement le contenu modal. Ma solution a été de rendre le modal position: absolute;. Mon modal était à l'origine position: fixed;.

0
John Bullington

J'ai résolu le problème en ajoutant overflow:visible; et donnez-le padding-right: 30px; pour remplacer la largeur des barres de défilement.

0
Hassan

juste définir affichage: en ligne a résolu mon même problème.

Lien de référence que j'ai obtenu, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm

0
Pavan Joshi

Je viens de rencontrer ce problème et je cherche sur Internet une solution qui répond à mes besoins spécifiques. Dans mon cas, j'avais environ 7 tables imbriquées dans une table plus grande. La seule façon dont j'ai pu obtenir la page Web entière à imprimer et à afficher correctement dans l'aperçu avant impression était d'utiliser des sauts de page. Les sauts de page sont des propriétés CSS qui vous permettent de spécifier et/ou de forcer les sauts de page en attachant la propriété aux éléments de bloc.

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before

0
Zach Johnson