Διάλειμμα σελίδας - CSS-Κόλπα

Anonim

Δεν υπάρχει πραγματική page-breakιδιότητα στο CSS. Είναι στην πραγματικότητα ένα σύνολο 3 ακίνητα: page-break-before, page-break-afterκαι page-break-inside. Αυτές οι ιδιότητες συμβάλλουν στον καθορισμό της συμπεριφοράς του εγγράφου κατά την εκτύπωση. Για παράδειγμα, για να κάνετε ένα τυπωμένο έγγραφο περισσότερο σαν βιβλίο.

Ιδιότητες

σελίδα-διάλειμμα-πριν

Η page-break-beforeιδιότητα προσθέτει μια αλλαγή σελίδας πριν από το στοιχείο στο οποίο εφαρμόζεται.

Σημείωση : αυτή η ιδιότητα βρίσκεται σε εξέλιξη για αντικατάσταση από την πιο γενική break-beforeιδιότητα. Αυτή η νέα ιδιότητα χειρίζεται επίσης διαλείμματα στηλών και περιοχών ενώ είναι συμβατή με τη σύνταξη page-break-before. Έτσι πριν από τη χρήση page-break-before, ελέγξτε αν μπορείτε να χρησιμοποιήσετε break-beforeαντ 'αυτού.

Μια συνήθης περίπτωση χρήσης για αυτό είναι να το εφαρμόσετε στον επιλογέα, #commentsώστε ένας χρήστης που εκτυπώνει μια σελίδα με σχόλια να μπορεί εύκολα να επιλέξει να εκτυπώσει ολόκληρο το έγγραφο αλλά να σταματήσει πριν τα σχόλια καθαρά.

σελίδα-διάλειμμα μετά

Η page-break-afterιδιότητα προσθέτει μια αλλαγή σελίδας μετά το στοιχείο στο οποίο εφαρμόζεται.

Σημείωση : αυτή η ιδιότητα βρίσκεται σε εξέλιξη για αντικατάσταση από την πιο γενική break-afterιδιότητα. Αυτή η νέα ιδιότητα χειρίζεται επίσης διαλείμματα στηλών και περιοχών ενώ είναι συμβατή με τη σύνταξη page-break-after. Έτσι πριν από τη χρήση page-break-after, ελέγξτε αν μπορείτε να χρησιμοποιήσετε break-afterαντ 'αυτού.

σελίδα-διάσπαση

Η page-break-insideιδιότητα προσθέτει μια αλλαγή σελίδας μέσα στο στοιχείο στο οποίο εφαρμόζεται.

Σύνταξη

page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoid

Οι τιμές leftκαι οι rightτιμές page-break-beforeκαι page-break-afterαναφέρονται σε διάταξη διάδοσης (όπως ένα βιβλίο) όπου υπάρχουν ξεχωριστές αριστερές και δεξιές σελίδες. Λειτουργούν έτσι:

  • left αναγκάζει μία ή δύο αλλαγές σελίδας μετά το στοιχείο έτσι ώστε η επόμενη σελίδα να διαμορφωθεί ως αριστερή σελίδα.
  • right αναγκάζει μία ή δύο αλλαγές σελίδων μετά το στοιχείο έτσι ώστε η επόμενη σελίδα να έχει τη μορφή σωστής σελίδας.

Σκεφτείτε alwaysως ένα μείγμα και των δύο. Η προδιαγραφή λέει:

Ένας παράγοντας χρήστη που συμμορφώνεται μπορεί να ερμηνεύσει τις τιμές «αριστερά» και «δεξιά» ως «πάντα».

Παράδειγμα

@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )

Αυτό το απόσπασμα κώδικα κάνει 3 πράγματα:

  • επιβάλλει ένα διάλειμμα σελίδας πριν από όλες τις h2επικεφαλίδες (ίσως οι ετικέτες h2 στο έγγραφό σας είναι τίτλοι κεφαλαίων που αξίζουν μια νέα σελίδα)
  • αποτρέπει την αλλαγή σελίδων αμέσως μετά τους υπότιτλους γιατί φαίνεται περίεργο
  • αποτρέπει τις αλλαγές σελίδων μέσα σε preετικέτες και εισαγωγικά σε επίπεδο μπλοκ

Υποστήριξη προγράμματος περιήγησης

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Οποιος Οποιος Οποιος 7+ 4+ TBD TBD

Μπορείτε να εκτυπώσετε από κινητές συσκευές, όπως το AirPrint σε iOS, αλλά δεν το έχουμε δοκιμάσει τόσο πολύ. Εάν κάποιος έχει δεδομένα σχετικά με την υποστήριξη, ενημερώστε μας.