Θραύση - CSS-Κόλπα

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

Ευτυχώς, μπορείτε να πείτε στο πρόγραμμα περιήγησης να διατηρεί συγκεκριμένα στοιχεία μαζί break-inside.

li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )

Προς το παρόν, η ιδιοκτησία δέχεται καθολικά τις τιμές autoκαι avoid.

Χρησιμοποιήστε avoidένα στοιχείο μέσα σε διάταξη πολλών στηλών για να αποτρέψετε την διάσπαση της ιδιότητας.

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

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

Η ιδιότητα παίρνει μετά τις ιδιότητες αλλαγής σελίδας και μοιράζεται τις ίδιες τιμές. Προς το παρόν, ο Firefox χρησιμοποιεί page-break-inside.

Δείτε το παράδειγμα της στήλης στυλό (CSS-Tricks) της Katy DeCorah (@katydecorah) στο CodePen.

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

Ιδιότητες αλλαγής σελίδας:

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
91	87	11	88	ΤΡ

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Υποστήριξη διάταξης πολλαπλών στηλών:

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
91	87	10	12	10

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2