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

Για αυτό, το αγαπημένο μας CSS θα έρθει σε βοήθεια. Είναι πολύ απλό, κοίτα.

Ας υποθέσουμε ότι έχουμε ένα μπλοκ όπως αυτό από έναν κατάλογο προϊόντων:

Εδώ είναι η δομή του:

Εδώ είναι τα στυλ του:

Someblock( περίγραμμα: 1px συμπαγές #cccccc; περιθώριο: 15px auto; padding: 10px; πλάτος: 250px; ) .header( border-bottom: 1px διακεκομμένο; μέγεθος γραμματοσειράς: 16px; βάρος γραμματοσειράς: bold; margin-bottom: 12p ;)

Συμφωνώ, φαίνεται τρομερό. Φυσικά, μπορείτε να συντομεύσετε το όνομα του προϊόντος. Τι γίνεται όμως αν υπάρχουν εκατοντάδες ή χιλιάδες από αυτά; Μπορείτε επίσης να χρησιμοποιήσετε την PHP για να περικόψετε μέρος του ονόματος, περιορίζοντας το σε συγκεκριμένο αριθμό χαρακτήρων. Τι γίνεται όμως αν η διάταξη αλλάξει αργότερα και τα μπλοκ είναι μικρότερα ή, αντίθετα, 2-3 φορές μεγαλύτερα; Τίποτα από αυτά δεν είναι επιλογή, τίποτα από αυτά δεν μας ταιριάζει.

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

Έτσι, αφήνοντας στην άκρη τη χειροκίνητη επεξεργασία των ονομάτων προϊόντων και την προγραμματική περικοπή στυλ, παίρνουμε το CSS στα χέρια μας και βλέπουμε τι παίρνουμε:

Miracle Yudo βραδινός δωρητής δύναμης, μυστηριώδης, τέχνη. 20255-59

Ένα υπέροχο προϊόν σε σούπερ τιμή, μόνο 100 ρούβλια. Θα φωτίσει τα μοναχικά σας βράδια και θα σας δώσει ζωντάνια!

Λοιπόν, είναι καλύτερα; Κατά τη γνώμη μου, πάρα πολύ! Και περάστε το ποντίκι σας πάνω από τον τίτλο... voila! Εδώ μας παρουσιάζεται ολόκληρο.

Τίποτα δεν έχει αλλάξει στη δομή μας, απλά πρόσθεσα μια ντίβα με μια τάξη .επί κεφαλήςετικέτα τίτλου. Και εδώ είναι τα νέα, ενημερωμένα στυλ:

Someblock( περίγραμμα: 1px συμπαγές #cccccc; περιθώριο: 15px auto; padding: 10px; πλάτος: 250px; ) .header( border-bottom: 1px διακεκομμένο; μέγεθος γραμματοσειράς: 16px; βάρος γραμματοσειράς: bold; margin-bottom: 12p ; υπερχείλιση: κρυφό, κείμενο-υπερχείλιση: έλλειψη, κενό διάστημα: nowrap; )

Δείτε τι κάναμε:

• Προσθέσαμε μια ιδιότητα στο μπλοκ λευκός χώρος: nowrap, το οποίο αφαιρεί τη δυνατότητα του κειμένου να αναδιπλώνει λέξεις νέα γραμμή, τραβώντας το σε μια γραμμή.
• Στη συνέχεια προσθέσαμε το ακίνητο υπερχείλιση: κρυφός, που περιόρισε την ορατότητα της γραμμής μας στο πλάτος του μπλοκ, με αποτέλεσμα να κόβει όλα τα περιττά και να μην τα δείχνει στον επισκέπτη.
• Λοιπόν, στο τέλος προσθέσαμε μια έλλειψη στη γραμμή μας χρησιμοποιώντας την ιδιότητα κείμενο-υπερχείλιση: έλλειψη, επιτρέποντας έτσι στον επισκέπτη να καταλάβει ότι αυτό δεν είναι το τέλος της γραμμής και ότι πιθανότατα πρέπει να σηκώσει το ποντίκι του και να το δει πλήρως.

Αγαπήστε το CSS, μάθετε CSS και η δημιουργία ιστοτόπων δεν θα σας φαίνεται τόσο δύσκολη =)

Πολλοί άνθρωποι έχουν πιθανώς αντιμετωπίσει το πρόβλημα όταν κάποιο κείμενο πρέπει να εμφανιστεί σε μία γραμμή. Επιπλέον, το κείμενο μπορεί να είναι αρκετά μεγάλο και το πλάτος του μπλοκ στο οποίο βρίσκεται αυτό το κείμενο συνήθως περιορίζεται τουλάχιστον στο ίδιο μέγεθος του παραθύρου του προγράμματος περιήγησης. Για αυτές τις περιπτώσεις, επινοήθηκε η ιδιότητα υπερχείλισης κειμένου, η οποία συμπεριλήφθηκε στη σύσταση CSS3 και εφαρμόστηκε για πρώτη φορά στον IE6, πολύ καιρό πριν. Όταν χρησιμοποιείτε αυτήν την ιδιότητα για ένα μπλοκ, εάν το κείμενό του είναι ευρύτερο από το ίδιο το μπλοκ, τότε το κείμενο αποκόπτεται και τοποθετείται μια έλλειψη στο τέλος. Αν και όλα δεν είναι τόσο απλά εδώ, θα επανέλθουμε σε αυτό λίγο αργότερα.
Με τον Internet Explorer όλα είναι ξεκάθαρα, τι γίνεται με άλλα προγράμματα περιήγησης; Και παρόλο που η ιδιότητα υπερχείλισης κειμένου εξαιρείται επί του παρόντος από την προδιαγραφή CSS3, το Safari την υποστηρίζει (σύμφωνα με τουλάχιστον, στην έκδοση 3), Opera επίσης (από την έκδοση 9, αν και η ιδιότητα ονομάζεται -o-overflow-text). Αλλά ο Firefox δεν το υποστηρίζει, δεν το υποστηρίζει, ακόμη και στην έκδοση 3 δεν θα το υποστηρίζει. Θλιβερό αλλά αληθινό. Ίσως όμως μπορεί να γίνει κάτι;

Φυσικά, μπορεί να γίνει. Όταν έψαχνα στο Διαδίκτυο σχετικά με αυτήν την ιδιότητα και πώς να το κάνω στον Firefox, συνάντησα απλή λύση. Η ουσία της λύσης:

Αυτό είναι όλο. Διαβάστε το άρθρο για λεπτομέρειες.
Η λύση δεν είναι κακή, αλλά υπάρχουν προβλήματα:

1. Το κείμενο μπορεί να αποκοπεί στη μέση (σχετικά μιλώντας) του γράμματος και θα δούμε το «κούτσουρο» του.
2. Η έλλειψη εμφανίζεται πάντα, ακόμη και όταν το κείμενο είναι μικρότερο από το πλάτος του μπλοκ (δηλαδή, δεν πέφτει έξω από αυτό και δεν χρειάζεται η έλλειψη).

Βήμα πρώτο

Ας εστιάσουμε πρώτα στο δεύτερο πρόβλημα, δηλαδή στο πώς να αποφύγετε την εμφάνιση έλλειψης όταν δεν χρειάζεται. Αφού τσάκωσα το μυαλό μου και πειραματιστώ «λίγο», βρήκα μια λύση. Θα προσπαθήσω να εξηγήσω.
Το θέμα είναι ότι χρειαζόμαστε ένα ξεχωριστό μπλοκ με έλλειψη που θα εμφανίζεται μόνο όταν το κείμενο καταλαμβάνει πολύ χώρο σε πλάτος. Τότε μου ήρθε η ιδέα ενός πλωτού μπλοκ που πέφτει. Αν και ακούγεται τρομακτικό, σημαίνει απλώς ένα μπλοκ που είναι πάντα εκεί και πιέζεται προς τα δεξιά, αλλά όταν το πλάτος του κειμένου γίνεται μεγάλο, το κείμενο σπρώχνει το μπλοκ στην επόμενη γραμμή.
Ας προχωρήσουμε στην εξάσκηση, αλλιώς είναι δύσκολο να το εξηγήσω. Ας ρυθμίσουμε Δομή HTML:

πολύ μεγάλο κείμενο

Όχι πολύ συμπαγές, αλλά δεν μπορούσα να κάνω κάτι μικρότερο. Έτσι, έχουμε ένα μπλοκ κοντέινερ DIV.ellipsis, ένα μπλοκ με το κείμενό μας και ένα άλλο μπλοκ που θα περιέχει την έλλειψη. Σημειώστε ότι το "μπλοκ έλλειψης" είναι στην πραγματικότητα κενό, επειδή δεν χρειαζόμαστε τις επιπλέον τρεις τελείες όταν αντιγράφουμε το κείμενο. Επίσης, μην ανησυχείτε για την έλλειψη πρόσθετων κλάσεων, καθώς αυτή η δομή αντιμετωπίζεται καλά χρησιμοποιώντας επιλογείς CSS. Και εδώ είναι το ίδιο το CSS:

.ellipsis ( υπερχείλιση: κρυφό; λευκό διάστημα: nowrap; ύψος γραμμής: 1,2 εκ. ύψος: 1,2 εκ. περιθώριο: 1 εικονοστοιχείο συμπαγές κόκκινο; ) .ellipsis > DIV:first-child ( float: αριστερά; ) .ellipsis > DIV + DIV ( float: δεξιά; margin-top: -1,2em; ).ellipsis >

Αυτό είναι όλο. Ελέγχουμε και βεβαιωνόμαστε ότι λειτουργεί όπως προβλέπεται σε Firefox, Opera, Safari. Στο IE υπάρχει ένα πολύ περίεργο, αλλά προβλέψιμο αποτέλεσμα. Στον IE6 όλα έχουν φύγει, αλλά στον IE7 απλά δεν λειτουργεί, αφού δεν υποστηρίζει περιεχόμενο που δημιουργείται. Αλλά θα επανέλθουμε στο IE αργότερα.

Προς το παρόν, ας δούμε τι έχουμε κάνει. Αρχικά, ορίζουμε το ύψος γραμμής και το ύψος του κύριου μπλοκ, αφού πρέπει να γνωρίζουμε το ύψος του μπλοκ και το ύψος της γραμμής κειμένου. Ορίζουμε την ίδια τιμή για το περιθώριο-κορυφή του μπλοκ με έλλειψη, αλλά με αρνητική τιμή. Έτσι, όταν το μπλοκ δεν «επαναφέρεται» στην επόμενη γραμμή, θα βρίσκεται πάνω από τη γραμμή κειμένου (μία γραμμή), όταν επαναφέρεται, θα είναι στο επίπεδό του (στην πραγματικότητα, είναι χαμηλότερο, απλώς το τραβάμε μία γραμμή επάνω). Για να κρύψουμε περιττά πράγματα, ειδικά όταν δεν χρειάζεται να εμφανιστεί η έλλειψη, κάνουμε υπερχείλιση: κρυφή για το κύριο μπλοκ, οπότε όταν η έλλειψη είναι πάνω από τη γραμμή, δεν θα εμφανίζεται. Αυτό μας επιτρέπει επίσης να αφαιρέσουμε κείμενο που βρίσκεται έξω από το μπλοκ (στη δεξιά άκρη). Για να αποτρέψουμε την απροσδόκητη αναδίπλωση του κειμένου και την ώθηση του μπλοκ με την έλλειψη κάτω και κάτω, δημιουργούμε κενό διάστημα: nowrap, απαγορεύοντας έτσι τις παύλες - το κείμενό μας θα είναι πάντα σε μία γραμμή. Για το μπλοκ με κείμενο, ορίσαμε float: αριστερά ώστε να μην συμπτύξει αμέσως το μπλοκ με την έλλειψη και να καταλαμβάνει το ελάχιστο πλάτος. Δεδομένου ότι μέσα στο κύριο μπλοκ (DIV.ellipsis) και τα δύο μπλοκ αιωρούνται (float: αριστερά/δεξιά), το κύριο μπλοκ θα συμπτύξει όταν το μπλοκ κειμένου είναι κενό, επομένως για το κύριο μπλοκ ορίσαμε ένα σταθερό ύψος (ύψος: 1,2em) . Και τέλος, χρησιμοποιούμε το ψευδοστοιχείο ::after για να εμφανίσουμε την έλλειψη. Για αυτό το ψευδοστοιχείο ορίσαμε επίσης ένα φόντο για να καλύψουμε το κείμενο που θα εμφανίζεται κάτω από αυτό. Ορίζουμε ένα πλαίσιο για το κύριο μπλοκ μόνο για να δούμε τις διαστάσεις του μπλοκ· αργότερα θα το αφαιρέσουμε.
Εάν ο Firefox υποστήριζε ψευδοστοιχεία καθώς και το Opera και το Safari όσον αφορά την τοποθέτησή τους (ρύθμιση θέσης/float κ.λπ. για αυτά), τότε θα ήταν δυνατό να μην χρησιμοποιηθεί ξεχωριστό μπλοκ για έλλειψη. Δοκιμάστε να αντικαταστήσετε τους τελευταίους 3 κανόνες με τους παρακάτω:

.ellipsis > DIV:first-child::after ( float: right; content: "..."; margin-top: -1,2em; background-color: white; position: related; )

σε Opera και Safari, όλα λειτουργούν όπως πριν, και χωρίς το πρόσθετο μπλοκ ellipsis. Αλλά ο Firefox είναι απογοητευτικός. Αλλά είναι για εκείνον που παίρνουμε την απόφαση. Λοιπόν, θα πρέπει να αρκεστείτε στην αρχική δομή HTML.

Βήμα δυο

Όπως ίσως έχετε παρατηρήσει, απαλλαγήκαμε από το πρόβλημα των ελλείψεων που εμφανίζονται όταν το κείμενο χωράει σε ένα μπλοκ. Ωστόσο, έχουμε ακόμα ένα πρόβλημα - το κείμενο είναι κομμένο στη μέση των γραμμάτων. Και εξάλλου δεν λειτουργεί σε IE. Για να ξεπεράσετε και τα δύο, πρέπει να χρησιμοποιήσετε τον εγγενή κανόνα υπερχείλισης κειμένου για προγράμματα περιήγησης και μόνο για τον Firefox χρησιμοποιήστε τη λύση που περιγράφεται παραπάνω (δεν υπάρχει εναλλακτική λύση). Θα καταλάβουμε πώς να δημιουργήσουμε μια λύση "μόνο για τον Firefox" αργότερα, αλλά τώρα ας προσπαθήσουμε να κάνουμε αυτό που έχουμε να λειτουργεί χρησιμοποιώντας υπερχείλιση κειμένου. Ας τροποποιήσουμε το CSS:

.ellipsis ( υπερχείλιση: κρυφό, λευκό διάστημα: nowrap, ύψος γραμμής: 1,2 εκ., ύψος: 1,2 εκ., περίγραμμα: 1 εικονοστοιχείο συμπαγές κόκκινο; κείμενο-υπερχείλιση: έλλειψη; -o-text-overflow: έλλειψη; πλάτος: 100%; } .ellipsis * ( οθόνη: inline; ) /*.ellipsis > DIV:first-child ( float: αριστερά; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1,2em; ) .ellipsis > DIV + DIV::after ( background-color: white; περιεχόμενο: "...";) */

Όπως αποδείχθηκε, δεν υπάρχουν πολλά για επεξεργασία. Τρεις γραμμές έχουν προστεθεί στο στυλ του κύριου μπλοκ. Δύο από αυτά περιλαμβάνουν υπερχείλιση κειμένου. Ασκηση πλάτος πλάτος: Απαιτείται 100% για IE, έτσι ώστε το κείμενο να μην επεκτείνει το μπλοκ στο άπειρο και η ιδιότητα υπερχείλισης κειμένου να λειτουργεί. Ουσιαστικά περιορίσαμε το πλάτος. Θεωρητικά, το DIV, όπως όλα τα στοιχεία μπλοκ, εκτείνεται σε όλο το πλάτος του κοντέινερ και πλάτος: το 100% είναι άχρηστο, ακόμη και επιβλαβές, αλλά το IE έχει πρόβλημα με τη διάταξη, καθώς το κοντέινερ τεντώνεται πάντα για να ταιριάζει στο περιεχόμενο. Δεν υπάρχει άλλος τρόπος. Επίσης, κάναμε όλα τα εσωτερικά στοιχεία ενσωματωμένα, γιατί για ορισμένα προγράμματα περιήγησης (Safari & Opera) η υπερχείλιση κειμένου δεν θα λειτουργήσει διαφορετικά, καθώς υπάρχουν στοιχεία μπλοκ μέσα. Σχολιάσαμε τους τρεις τελευταίους κανόνες, αφού σε αυτή την περίπτωση δεν χρειάζονται και σπάνε τα πάντα (σύγκρουση). Αυτοί οι κανόνες θα χρειαστούν μόνο για τον Firefox.
Ας δούμε τι πήραμε και συνεχίζουμε.

Βήμα τρίτο

Όταν κοίταξα για άλλη μια φορά τη σελίδα (πριν να γράψω αυτό το άρθρο) που αναφέρθηκε στην αρχή, τότε, από περιέργεια, έψαξα μέσα από τα σχόλια για έξυπνες σχετικές ιδέες. Και το βρήκα σε ένα σχόλιο που μιλούσε για μια άλλη λύση που λειτουργεί σε Firefox και IE (για αυτό το άτομο, όπως και για τον συγγραφέα του πρώτου άρθρου, προφανώς δεν υπάρχουν άλλα προγράμματα περιήγησης). Έτσι, σε αυτή τη λύση, ο συγγραφέας αντιμετωπίζει αυτό το φαινόμενο (την απουσία υπερχείλισης κειμένου) με ελαφρώς διαφορετικό τρόπο, προσαρτώντας χειριστές στα συμβάντα υπερχείλισης και υπορροής σε στοιχεία για τα οποία ήταν απαραίτητο να τεθεί μια έλλειψη, εάν χρειαζόταν. Δεν είναι κακό, αλλά μου φαίνεται ότι αυτή η λύση είναι πολύ ακριβή (από πλευράς πόρων), ειδικά επειδή είναι κάπως αστοχία. Ωστόσο, καθώς ανακάλυψε πώς το πέτυχε αυτό, συνάντησε ένα ενδιαφέρον πράγμα, δηλαδή Ιδιότητες CSS o -moz-δεσμευτικό. Από όσο καταλαβαίνω, αυτό είναι ανάλογο συμπεριφοράς σε IE, μόνο με διαφορετική σάλτσα και πιο δροσερό. Αλλά δεν θα μπούμε σε λεπτομέρειες, ας πούμε απλώς ότι με αυτόν τον τρόπο μπορείτε να επισυνάψετε έναν χειριστή JavaScript σε ένα στοιχείο με χρησιμοποιώντας CSS. Ακούγεται περίεργο, αλλά λειτουργεί. Τι κάνουμε:

.ellipsis ( υπερχείλιση: κρυφό, λευκό διάστημα: nowrap, ύψος γραμμής: 1,2 εκ., ύψος: 1,2 εκ., περίγραμμα: 1 εικονοστοιχείο συμπαγές κόκκινο, υπερχείλιση κειμένου: έλλειψη, -o-κείμενο-υπερχείλιση: έλλειψη, πλάτος: 100% ; -moz-binding: url(moz_fix.xml#ellipsis); ζουμ: 1;) .ellipsis * ( οθόνη: inline; ) .moz-ellipsis > DIV:πρώτο παιδί( float: αριστερά; οθόνη: μπλοκ; } .moz-ellipsis > DIV + DIV( float: δεξιά, margin-top: -1,2em; οθόνη: μπλοκ; } .moz-ellipsis > DIV + DIV::after(χρώμα φόντου: λευκό, περιεχόμενο: "..."; )

Όπως μπορείτε να δείτε, πάλι δεν κάναμε πολλές αλλαγές. Σε αυτό το βήμα στον IE7 υπάρχει ένα περίεργο σφάλμα, όλα είναι λοξά αν δεν ρυθμίσετε το ζουμ: 1 για το κύριο μπλοκ (η πιο απλή επιλογή). Εάν αφαιρέσετε (διαγράψετε, σχολιάσετε) τον κανόνα .ellipsis * ή .moz-ellipsis > DIV + DIV (που δεν επηρεάζει καθόλου το IE7), τότε το σφάλμα εξαφανίζεται. Όλα αυτά είναι περίεργα, αν κάποιος ξέρει τι φταίει, ας με ενημερώσει. Προς το παρόν, θα αρκεστούμε στο ζουμ: 1 και θα προχωρήσουμε στον Firefox.
Η ιδιότητα -moz-binding περιλαμβάνει το αρχείο moz_fix.xml με μια εντολή με το αναγνωριστικό έλλειψη. Περιεχόμενα αυτού xml αρχείοΕΠΟΜΕΝΟ:

Το μόνο που κάνει αυτός ο κατασκευαστής είναι να προσθέτει την κλάση moz-ellipsis στο στοιχείο για το οποίο δούλεψε ο επιλογέας. Αυτό θα λειτουργήσει μόνο στον Firefox (προγράμματα περιήγησης gecko;), επομένως μόνο σε αυτό θα προστεθεί η κλάση moz-ellipsis στα στοιχεία και μπορούμε να προσθέσουμε πρόσθετους κανόνες. Αυτό ήθελαν. Δεν είμαι απολύτως σίγουρος για την ανάγκη για αυτό.style.mozBinding = "", αλλά από την εμπειρία με την έκφραση, είναι καλύτερα να είμαι στην ασφαλή πλευρά (γενικά, δεν είμαι πολύ εξοικειωμένος με αυτήν την πλευρά του Firefox, οπότε Θα μπορούσα να κάνω λάθος).
Μπορεί να ανησυχείτε ότι αυτή η τεχνική χρησιμοποιεί εξωτερικό αρχείο και JavaScript γενικά. Δεν υπάρχει λόγος να φοβάσαι. Πρώτον, εάν το αρχείο δεν φορτωθεί ή/και η JavaScript είναι απενεργοποιημένη και δεν λειτουργεί, δεν πειράζει, ο χρήστης απλά δεν θα δει την έλλειψη στο τέλος, το κείμενο θα αποκοπεί στο τέλος του μπλοκ. Δηλαδή, σε αυτή την περίπτωση παίρνουμε μια «αδιαμφισβήτητη» λύση. Μπορείτε να δείτε μόνοι σας.

Έτσι, πήραμε ένα στυλ για τα προγράμματα περιήγησης "Big Four", το οποίο εφαρμόζει υπερχείλιση κειμένου για Opera, Safari & IE και το μιμείται για τον Firefox, όχι πολύ καλά, αλλά είναι καλύτερο από το τίποτα.

Βήμα τέταρτο

Θα μπορούσαμε να βάλουμε ένα τέλος σε αυτό το σημείο, αλλά θα θέλαμε να βελτιώσουμε λίγο τη λύση μας. Εφόσον μπορούμε να συνδέσουμε έναν κατασκευαστή σε οποιοδήποτε μπλοκ και, κατά συνέπεια, να αποκτήσουμε τον έλεγχό του, γιατί να μην το εκμεταλλευτούμε. Ας απλοποιήσουμε τη δομή μας:

πολύ μεγάλο κείμενο

Ω! ναι! Νομίζω ότι θα συμφωνήσετε μαζί μου - αυτό είναι που χρειάζεστε!
Τώρα ας αφαιρέσουμε όλα τα περιττά πράγματα από το στυλ:

.ellipsis ( υπερχείλιση: κρυφό, λευκό διάστημα: nowrap, ύψος γραμμής: 1,2 εκ., ύψος: 1,2 εκ. url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: αριστερά; ) .moz-ellipsis > DIV + DIV ( float: δεξιά; margin-top: -1,2em; ) .moz -ellipsis > DIV + DIV::after ( φόντο-χρώμα: λευκό; περιεχόμενο: "..."; )

Καταργήσαμε επιτέλους το κόκκινο περίγραμμα :)
Τώρα, ας προσθέσουμε λίγο στο moz_fix.xml μας:

Τι συμβαίνει εδώ? Αναδημιουργούμε την αρχική μας δομή HTML. Δηλαδή, αυτές οι δυσκολίες με τα μπλοκ γίνονται αυτόματα και μόνο στον Firefox. Ο κώδικας JavaScript είναι γραμμένος με τις καλύτερες παραδόσεις :)
Δυστυχώς, δεν μπορούμε να αποφύγουμε την κατάσταση όταν το κείμενο κόβεται στη μέση της επιστολής (αν και, ίσως προσωρινά, καθώς η λύση μου είναι ακόμα πολύ ωμή και μπορεί να λειτουργήσει στο μέλλον). Αλλά μπορούμε να εξομαλύνουμε λίγο αυτό το αποτέλεσμα. Για να το κάνουμε αυτό χρειαζόμαστε μια εικόνα (λευκό φόντο με διαφανή κλίση) και μερικές αλλαγές στο στυλ:

.moz-ellipsis > DIV:first-child ( float: αριστερά; margin-right: -26px;) .moz-ellipsis > DIV + DIV ( float: δεξιά, margin-top: -1,2em; φόντο: url(ellipsis.png) repeat-y; padding-αριστερά: 26px; }

Ας κοιτάξουμε και ας απολαύσουμε τη ζωή.

Ας βάλουμε ένα τέλος σε αυτό.

συμπέρασμα

Θα σας δώσω ένα μικρό παράδειγμα για διάταξη τρίτων. Πήρα τον πίνακα περιεχομένων μιας από τις σελίδες της Wikipedia (η πρώτη που εμφανίστηκε) και εφάρμοσα τη μέθοδο που περιγράφεται παραπάνω σε αυτήν.
Γενικά αυτή την απόφασημπορεί να ονομαστεί καθολική μόνο με τέντωμα. Όλα εξαρτώνται από τη διάταξή σας και την πολυπλοκότητά της. Μπορεί να χρειαστείτε ένα αρχείο, ή ίσως ένα ντέφι. Αν και στις περισσότερες περιπτώσεις, νομίζω ότι θα λειτουργήσει. Και μετά, τώρα έχεις ένα σημείο εκκίνησης ;)
Ελπίζω να μάθατε κάτι ενδιαφέρον και χρήσιμο από το άρθρο;) Μάθετε, πειραματιστείτε, μοιραστείτε.
Καλή τύχη!

Υπάρχει κείμενο αυθαίρετου μήκους που πρέπει να εμφανίζεται μέσα σε ένα μπλοκ σταθερού ύψους και πλάτους. Σε αυτήν την περίπτωση, εάν το κείμενο δεν ταιριάζει πλήρως, θα πρέπει να εμφανιστεί ένα τμήμα κειμένου που ταιριάζει πλήρως στο συγκεκριμένο μπλοκ, μετά το οποίο ορίζεται μια έλλειψη.

Αυτή η εργασία είναι αρκετά συνηθισμένη, αλλά ταυτόχρονα δεν είναι τόσο ασήμαντη όσο φαίνεται.

Επιλογή για κείμενο μιας γραμμής σε CSS

Σε αυτήν την περίπτωση, μπορείτε να χρησιμοποιήσετε την ιδιότητα text-overflow: ellipsis. Σε αυτή την περίπτωση, το δοχείο πρέπει να έχει την ιδιότητα ξεχείλισμαίσος κρυμμένοςή συνδετήρας

Αποκλεισμός (πλάτος: 250 εικονοστοιχεία; λευκό διάστημα: nowrap; υπερχείλιση: κρυφό; υπερχείλιση κειμένου: έλλειψη ;)

Επιλογή για κείμενο πολλών γραμμών σε CSS

Ο πρώτος τρόπος περικοπής κειμένου πολλών γραμμών είναι με χρησιμοποιώντας CSSοι ιδιότητες εφαρμόζουν ψευδοστοιχεία :πρινΚαι :μετά. Ας ξεκινήσουμε με τη σήμανση HTML

Και τώρα τα ίδια τα ακίνητα

Πλαίσιο ( υπερχείλιση : κρυφό ; ύψος : 200 εικονοστοιχεία ; πλάτος : 300 εικονοστοιχεία , ύψος γραμμής : 25 εικονοστοιχεία ; ) .πλαίσιο :πριν (περιεχόμενο : "" ; float : αριστερά ; πλάτος : 5 εικονοστοιχεία ; ύψος : 200 εικονοστοιχεία ; > *:st. -child (float: δεξιά; πλάτος: 100%; margin-left: -5 px;) .box :after (περιεχόμενο: "\02026"; μέγεθος πλαισίου: content-box; float: δεξιά; θέση: σχετική; επάνω: -25 px ; αριστερά : 100% ; πλάτος : 3em , περιθώριο-αριστερά : -3em , padding-right : 5px ; text-align : right ; background-size : 100% 100% ; background : linear-gradient (προς τα δεξιά , rgba (255 , 255 , 255 , 0 ), λευκό 50% , λευκό ); )

Ένας άλλος τρόπος είναι να χρησιμοποιήσουμε την ιδιότητα στήλης-πλάτος, με την οποία ορίζουμε το πλάτος της στήλης για κείμενο πολλών γραμμών. Ωστόσο, όταν χρησιμοποιείτε αυτήν τη μέθοδο, δεν θα είναι δυνατό να ορίσετε μια έλλειψη στο τέλος. HTML:

Αποκλεισμός ( υπερχείλιση : κρυφό ; ύψος : 200 εικονοστοιχεία ; πλάτος : 300 εικονοστοιχεία ; ) .block__inner ( -webkit-column-width : 150 px ; -moz-column-width : 150 px ; ύψος 50 px ; height-50px ;

Υπάρχει ένας τρίτος τρόπος επίλυσης κειμένου πολλαπλών γραμμών χρησιμοποιώντας CSS για προγράμματα περιήγησης Webkit. Σε αυτό θα πρέπει να χρησιμοποιήσουμε πολλές συγκεκριμένες ιδιότητες με το πρόθεμα - διαδικτυακό κιτ. Το κύριο είναι το -webkit-line-clamp που σας επιτρέπει να καθορίσετε τον αριθμό των γραμμών που θα εξάγονται σε ένα μπλοκ. Η λύση είναι όμορφη αλλά μάλλον περιορισμένη λόγω της εργασίας της σε μια περιορισμένη ομάδα προγραμμάτων περιήγησης

Αποκλεισμός ( υπερχείλιση : κρυφό ; υπερχείλιση κειμένου : έλλειψη ; εμφάνιση : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Επιλογή για κείμενο πολλών γραμμών σε JavaScript

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

var block = έγγραφο. querySelector(".block"), text = block. innerHTML, κλώνος = έγγραφο. createElement("div"); κλώνος στυλ. θέση = "απόλυτη" ; κλώνος στυλ. visibility = "κρυφό" ; κλώνος στυλ. πλάτος = μπλοκ . clientWidth + "px" ; κλώνος innerHTML = κείμενο ; έγγραφο. σώμα. appendChild(κλώνος); var l = κείμενο . μήκος - 1 ; για (; l >= 0 && clone. clientHeight > block. clientHeight; -- l) (clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = κλώνος . innerHTML ;

Αυτό είναι το ίδιο με ένα πρόσθετο για το jQuery:

(συνάρτηση ($) ( var truncate = συνάρτηση (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "απόλυτο" , ορατότητα : "κρυφό" , ύψος: "αυτόματο" )); el . μετά (κλώνος); var l = κείμενο . μήκος - 1 ; για (; l >= 0 && κλώνος . ύψος () > ύψος ; -- l ) (κλώνος . κείμενο (κείμενο. υποσυμβολοσειρά (0, l) + "..."); ) el. κείμενο (κλώνος. κείμενο ()); κλώνος . αφαίρεση (); $. fn. truncateText = συνάρτηση () (επιστρέφει αυτό . κάθε (συνάρτηση () ( περικοπή ($ (αυτό )); )); )(jQuery ));

Καθορίζει τις παραμέτρους ορατότητας του κειμένου σε ένα μπλοκ εάν ολόκληρο το κείμενο δεν χωράει στην καθορισμένη περιοχή. Υπάρχουν δύο επιλογές: το κείμενο είναι κομμένο. το κείμενο κόβεται και προστίθεται μια έλλειψη στο τέλος της γραμμής. text-overflow λειτουργεί εάν η ιδιότητα υπερχείλισης του μπλοκ έχει οριστεί σε αυτόματη , κύλιση ή κρυφή .

σύντομες πληροφορίες

Ονομασίες

	Περιγραφή	Παράδειγμα
<тип>	Υποδεικνύει τον τύπο της τιμής.	<размер>
Α & & Β	Οι τιμές πρέπει να εξάγονται με τη σειρά που καθορίζεται.	<размер> && <цвет>
A | σι	Υποδεικνύει ότι πρέπει να επιλέξετε μόνο μία τιμή από τις προτεινόμενες (A ή B).	κανονικό | μικρά καπάκια
Α || σι	Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλες με οποιαδήποτε σειρά.	πλάτος || μετρώ
	Ομαδικές αξίες.	[ καλλιέργεια || σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική.	ένθεση?
(Α, Β)	Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα.	<время>#

×

Αξίες

κλιπ Το κείμενο κόβεται για να ταιριάζει στην περιοχή. ellipsis Το κείμενο περικόπτεται και προστίθεται μια έλλειψη στο τέλος της γραμμής.

Παράδειγμα

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

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 1.

Ρύζι. 1. Έλειψη στο τέλος του κειμένου

Μοντέλο αντικειμένου

Ενα αντικείμενο.style.textΥπερχείλιση

Σημείωση

Η Opera πριν από την έκδοση 11 χρησιμοποιεί την ιδιότητα -o-text-overflow.

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

×