Html σε νέα γραμμή. Αλλαγή γραμμής σε HTML: χρησιμοποιήστε την ετικέτα br
Συχνά υπάρχει ανάγκη προσθήκης νέα παράγραφος, αλλά χωρίς την κενή γραμμή που εισάγει η ετικέτα παραγράφου
Για ορισμένα τμήματα κειμένου, η τυπική απόσταση παραγράφων είναι απλώς ακατάλληλη. Αυτά μπορεί να είναι επιγραφές κάτω από εικόνες και σε πίνακες, ποιήματα, αποσπάσματα, υποσημειώσεις και σημειώσεις.
Για την επιβολή σπασίματος γραμμής, παρέχεται μια ειδική ετικέτα, η συνάρτηση της οποίας περιέχεται στο όνομά της br (διάλειμμα σειράς - "διάσπαση σειράς, γραμμή"). Ετικέτα γλώσσα υπερκειμένου σήμανσης htmlσημαίνει ότι όλο το περιεχόμενο που ακολουθεί πρέπει να ξεκινά από μια νέα γραμμή. Εάν είναι απαραίτητο, μπορείτε να προσθέσετε πολλές ετικέτες στη σειρά για να επιτύχετε το απαιτούμενο διάστημα.
Ετικέτα Δεν κάνει διάκριση πεζών-κεφαλαίων και δεν απαιτεί ετικέτα κλεισίματος επειδή είναι κενό στοιχείο, αλλά είναι καλύτερα να συνηθίσετε να κλείνουμε όλες τις ετικέτες. Στο XHTML, η ετικέτα διακοπής πρέπει να "κλείνεται" με ανάστροφη κάθετο.
Παράδειγμα χρήσης ετικέτας διαλείμματος
Η ετικέτα br σε δράση< /title></p><p><р>Απουσία από την εργασία</р></p><p><p>Πουθενά αλλού και ποτέ <br></p><p>Δεν ήμουν τόσο κακός <br></p><p>Οι αρχές είναι μια άπληστη ορδή <br></p><p>Με ροκανίζει ζωντανό</р></p><p>Απουσία από την εργασία</p><p>Πουθενά αλλού και ποτέ <br>Δεν ήμουν τόσο κακός. <br>Οι αρχές είναι μια άπληστη ορδή <br>Με ροκανίζει ζωντανό.</p><h2>Χαρακτηριστικό ετικέτας <br></h2><p>Το μόνο χαρακτηριστικό που έχει μια ετικέτα html <br>, που ονομάζεται Λέει στο πρόγραμμα περιήγησης τι να κάνει με την αναδίπλωση γραμμής εάν το κείμενο πρέπει να αναδιπλωθεί γύρω από ένα λεγόμενο αιωρούμενο στοιχείο, το οποίο θα μπορούσε να είναι, για παράδειγμα, μια εικόνα με ένα χαρακτηριστικό <a href="https://radiobud.ru/el/life-hacks-for-ios/vyravnivanie-teksta-v-css-svoistvo-text-align-vyravnivanie-elementov-v.html">ευθυγραμμίζω</a>, χρησιμοποιώντας τιμές δεξιά/αριστερά ή ένα μπλοκ στο CSS που έχει την ιδιότητα float.</p><p>Στις προδιαγραφές XHTML 1.0 / HTML 4.01, το χαρακτηριστικό clear μπορεί να χρησιμοποιηθεί μόνο με Transitional, Frameset και<!DOCTYPE>, διαφορετικά ο κωδικός δεν θα λειτουργήσει.</p><h2>Προσθήκη ετικετών στις ιδιότητες χαρακτηριστικών</h2><p>Η επίδραση του χαρακτηριστικού clear εξαρτάται από την τιμή του και την τοποθέτηση του αιωρούμενου στοιχείου. Το χαρακτηριστικό μπορεί να λάβει 4 τιμές:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>Η αριστερή τιμή εμποδίζει την αναδίπλωση του στοιχείου με αριστερή στοίχιση, επομένως το κείμενο θα σκοντάψει πάνω από την ετικέτα <br>, θα βρίσκεται κάτω από την εικόνα ή άλλο αιωρούμενο στοιχείο.</p><p>Ακριβώς το ίδιο αποτέλεσμα θα προκύψει από τη χρήση του ορίσματος all, το οποίο δεν θα επιτρέψει ποτέ ούτε το δεξιό ούτε το αριστερό.</p><p>Η σωστή τιμή αποτρέπει την αναδίπλωση του κειμένου γύρω από το στοιχείο με τη δεξιά στοίχιση, άρα μετά την ετικέτα <br>το κείμενο δεν θα έχει άλλη επιλογή από το να περιηγηθεί την εικόνα, ρέοντας γύρω της προς τα δεξιά.</p><p>Η τιμή none ("ούτε δικό σας ούτε δικό μας") γενικά αφαιρεί όλες τις δυνάμεις από το χαρακτηριστικό καθαρό και την ετικέτα <br>μετακινεί σιωπηλά τη γραμμή προς τα κάτω.</p><p>Το χαρακτηριστικό clear της ετικέτας δεν έχει μια προεπιλεγμένη τιμή από μόνη της.</p><h2>Ετικέτα <br>- αυτή είναι μια μαλακή μεταφορά</h2><p>Η ετικέτα αλλαγής γραμμής είναι πολύ χρήσιμη για τη δημιουργία του απαραίτητου διαστήματος μεταξύ των παραγράφων, εντός της οποίας χρησιμοποιείται ως μαλακό διάλειμμα, αλλά όχι ως μέσο για τη διαίρεση του κειμένου σε παραγράφους.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>Δεν πρέπει να παρασυρθείτε πολύ με την ετικέτα νέας γραμμής για τη μορφοποίηση κειμένου, επειδή τα αποτελέσματα από τη χρήση της δεν είναι πάντα κομψά.</p><p>Για παράδειγμα, εάν χρησιμοποιείτε την ετικέτα <br>για να σπάσετε γραμμές μέσα σε μια παράγραφο, αυτό μπορεί να έχει ως αποτέλεσμα την εμφάνιση μιας "χτένας" στο παράθυρο του χρήστη, εάν είναι μικρότερο από το παράθυρο που στόχευε ο webmaster.</p>
<p>Μάθημα 5.</p><h1></h1>
<p>Σε αυτό το μάθημα: <br>1. Ας μάθουμε πώς να το κάνουμε <a href="https://radiobud.ru/el/computers/html-primechaniya-chto-takoe-kommentarii-v-kode-html-i-kak-ih.html">κώδικας html</a>ήταν πιο βολικό και ευκολοδιάβαστο για εμάς. <br>2. Ας δούμε πώς να τυλίξετε σωστά μια γραμμή κειμένου.</p>
<h2>Κάνοντας τον κώδικα html βολικό.</h2>
<p>Πλέον ο κώδικάς μας είναι σαφής και ευανάγνωστος, αφού υπάρχει λίγο κείμενο και πρακτικά δεν υπάρχουν ετικέτες. Όταν δημιουργούμε περισσότερα <a href="https://radiobud.ru/el/life-hacks-for-pc/kakoi-mozhno-postavit-parol-v-kontakte-slozhnyi-parol-dlya-stranicy.html">σύνθετη σελίδα</a>, τότε θα υπάρχουν πολλές ετικέτες, οπότε θα είναι δύσκολο να βρείτε την κατάλληλη.</p>
<p>Για να αποφύγετε το χάος των ετικετών, πρέπει αρχικά να τακτοποιήσετε ετικέτες και γραμμές έτσι ώστε να είναι οπτικά πιο εύκολα αντιληπτές. Όταν το πρόγραμμα περιήγησης διαβάζει πληροφορίες από <a href="https://radiobud.ru/el/life-hacks-for-smartphones/avtomaticheskii-perehod-na-stranicu-html-perenapravlenie-na-druguyu.html">σελίδες html</a>, δεν έχει σημασία για αυτόν πόσα κενά και πόσα <a href="https://radiobud.ru/el/life-hacks-for-ios/kak-otpravit-pustoe-soobshchenie-vkontakte-kak-ostavit-pustoe.html">κενές γραμμές</a>στον κώδικα.</p>
<p>Άλλαξα το κείμενο στον κώδικα της σελίδας σε σχέση με αυτό που δημιουργήσαμε, αλλά δεν πειράζει. Η αριστερή και η δεξιά εικόνα δείχνουν τον ίδιο κωδικό. Και οι δύο επιλογές θα εμφανίζονται από το πρόγραμμα περιήγησης στην οθόνη της οθόνης ακριβώς το ίδιο. Συμφωνώ, η εργασία με τον κωδικό που εμφανίζεται στα δεξιά θα είναι πολύ πιο εύκολη από ό,τι με αυτόν στα αριστερά.</p>
<p>Ο κώδικας που εξετάζουμε είναι πολύ απλός, αλλά ακόμα και τώρα η διαφορά στην οπτική αντίληψη είναι αισθητή. Δεν υπάρχουν συγκεκριμένοι κανόνες για να "βάλουμε τα πράγματα σε τάξη" κάθε πλοίαρχος αποφασίζει μόνος του πώς είναι πιο βολικό γι 'αυτόν να εργαστεί.</p>
<h2>Αλλαγή γραμμής HTML. Προσθήκη ετικέτας <br>.</h2>
<p>Δώστε προσοχή στην εικόνα. Στην πρώτη έκδοση το κείμενο είναι γραμμένο σε μία γραμμή, στη δεύτερη έκδοση σε δύο γραμμές.</p>
<br><img src='https://i0.wp.com/htmlboss.ru/image/lesson6-2.jpg' width="100%" loading=lazy loading=lazy><p>Το πρόγραμμα περιήγησης θα εμφανίσει και τις δύο επιλογές το ίδιο. Το κείμενο θα γραφτεί σε μία γραμμή:</p>
<br><img src='https://i2.wp.com/htmlboss.ru/image/lesson6-3.jpg' width="100%" loading=lazy loading=lazy><p>Ρωτάς γιατί είναι αυτό; Πράγματι, σε έναν από τους κωδικούς, μέρος του κειμένου μετακινείται σε άλλη γραμμή. Θα ήταν λογικό αν στο πρόγραμμα περιήγησης κάποιο από το κείμενο μεταφερόταν επίσης σε άλλη γραμμή, αλλά η html έχει τη δική της λογική από αυτή την άποψη. <u>Αν κάνουμε μια αλλαγή γραμμής στον κώδικα html, τότε για το πρόγραμμα περιήγησης αυτό ισοδυναμεί με ένα κενό</u>(σαν κανονικό κενό μεταξύ των λέξεων στο κείμενο). Εάν μετακινήσουμε μέρος του κειμένου όχι μία γραμμή προς τα κάτω, αλλά 2 ή 3 (οποιοσδήποτε αριθμός), τότε το πρόγραμμα περιήγησης θα εξακολουθεί να θεωρεί αυτήν την απόσταση ως ένα κανονικό διάστημα μεταξύ των λέξεων και όταν εμφανίζεται στην οθόνη, το κείμενο θα γράφεται σε μία γραμμή .</p>
<h3>Προσθήκη ετικέτας <br></h3>
<p>Όταν γνωριστήκαμε με τις ετικέτες στο τρίτο μάθημα, ανέφερα ότι υπάρχουν ετικέτες που δεν χρειάζονται κλείσιμο. Ετικέτα <b><br></b>ένα από αυτά χρησιμοποιείται για διαλείμματα γραμμής. <br>Ας το εφαρμόσουμε στον κώδικα:</p>
<img src='https://i1.wp.com/htmlboss.ru/image/lesson6-4.jpg' height="298" width="388" loading=lazy loading=lazy><p>Έχουμε εισαγάγει μια ετικέτα <b><br></b>στον κώδικα html μας και τώρα όταν εκκινήσετε το αρχείο μέσω του προγράμματος περιήγησης, μέρος του κειμένου θα μεταφερθεί στην επόμενη γραμμή. <br> * <i>Μην ξεχάσετε να αποθηκεύσετε τις αλλαγές στο Σημειωματάριο (Ctrl + S) και να ανανεώσετε τη σελίδα στο πρόγραμμα περιήγησης (F5).</i></p>
<p>Όταν εμφανίζεται <a href="https://radiobud.ru/el/life-hacks-for-smartphones/skachat-vse-tekstovye-dokumenty-vindovs-8-tekstovye-redaktory.html">έγγραφα κειμένου</a>Στο πρόγραμμα περιήγησης, η θέση της αλλαγής γραμμής μέσα σε μια παράγραφο προσδιορίζεται αυτόματα ανάλογα με το μέγεθος των γραμματοσειρών και το μέγεθος του παραθύρου προβολής. Οι αλλαγές γραμμής μπορούν να πραγματοποιηθούν μόνο με τη χρήση χαρακτήρων διαχωρισμού λέξεων (για παράδειγμα, κενά). Μερικές φορές στα έγγραφα πρέπει να ορίσετε μια αναγκαστική τροφοδοσία γραμμής, η οποία υλοποιείται ανεξάρτητα από τις ρυθμίσεις του προγράμματος περιήγησης. Αυτό γίνεται χρησιμοποιώντας την ετικέτα αναγκαστικής τροφοδοσίας γραμμής. <BR>, το οποίο δεν έχει αντίστοιχη ετικέτα κλεισίματος. Ενεργοποίηση ετικέτας <BR>στο κείμενο του εγγράφου θα διασφαλίσει ότι το επόμενο κείμενο τοποθετείται στην αρχή μιας νέας γραμμής. Για παράδειγμα, αυτή η προσέγγιση μπορεί να χρησιμοποιηθεί για τη δημιουργία δομών τύπου λίστας χωρίς τη χρήση ειδικών ετικετών σήμανσης λίστας. Ή, για παράδειγμα, αυτή η ετικέτα δεν μπορεί να χρησιμοποιηθεί για την εμφάνιση ποιημάτων κ.λπ.</p>
<p>Ακολουθεί ένα παράδειγμα χρήσης αναγκαστικής τροφοδοσίας γραμμής (Εικ. 1.8):</p><p><TITLE>Χρήση αναγκαστικής τροφοδοσίας γραμμής
Πάνω από τη σκοτεινή Πετρούπολη
Ο Νοέμβρης ανέπνευσε το φθινοπωρινό κρύο.
Πιτσίλισμα με θορυβώδες κύμα
Στις άκρες του λεπτού φράχτη σου,
Ο Νέβα τριγυρνούσε σαν άρρωστος
Ανήσυχο στο κρεβάτι μου.
Α.Σ. Πούσκιν. Χάλκινος Ιππέας
Ρύζι. 1.8.Ετικέτα μπορεί να χρησιμοποιηθεί για αναγκαστική τροφοδοσία γραμμής
Σε αντίθεση με την ετικέτα παραγράφου
Όταν χρησιμοποιείτε την ετικέτα δεν θα δημιουργηθεί μια κενή συμβολοσειρά.
Χρήση ετικέτας απαιτεί προσοχή - είναι πιθανό το πρόγραμμα περιήγησης να έχει κάνει ήδη μια αλλαγή γραμμής μία ή δύο λέξεις πριν συναντήσει την ετικέτα σας . Αυτό συμβαίνει εάν το πλάτος του παραθύρου προβολής του προγράμματος ανάγνωσης είναι μικρότερο από την ίδια ρύθμιση του προγράμματος με το οποίο δοκιμάσατε το έγγραφό σας. Σε αυτήν την περίπτωση, μπορεί να αποδειχθεί ότι μόνο μία λέξη παραμένει σε μια γραμμή στη μέση μιας παραγράφου, καταστρέφοντας έτσι την ομορφιά της διάταξης του εγγράφου.
Σημείωση
Όταν χρησιμοποιείτε την ετικέτα Για να σπάσετε κείμενο γύρω από μια εικόνα ή έναν πίνακα, μπορείτε να ρυθμίσετε την παράμετρο CLEAR για να σταματήσει η αναδίπλωση κειμένου. Μπορείτε να διαβάσετε για αυτό στα κεφάλαια 3 και 4.
Ετικέτες u
Υπάρχουν περιπτώσεις που πρέπει να εκτελέσετε την αντίθετη λειτουργία - απενεργοποιήστε τη τροφοδοσία γραμμής. Υπάρχει μια ετικέτα κοντέινερ για αυτό . Το κείμενο που επισημαίνεται με αυτήν την ετικέτα είναι εγγυημένο ότι χωράει σε μία γραμμή, ανεξάρτητα από το μήκος της. Εάν η γραμμή που προκύπτει εκτείνεται πέρα από το παράθυρο προβολής του προγράμματος περιήγησης, τότε οριζόντια λωρίδαπάπυρος.
Σημείωση
Για να διασφαλιστεί η συνέχεια του κειμένου που βρίσκεται στα κελιά του πίνακα, υπάρχει μια ειδική παράμετρος της ετικέτας NOWRAP
. Μπορείτε να μάθετε περισσότερα για αυτό στο Κεφάλαιο 4.
Σήμανση κειμένου με ετικέτα αδιάσπαστη γραμμήμπορείτε να πάρετε πολύ μακριές χορδές. Για να αποφευχθεί αυτό, μπορείτε να υποδείξετε στο πρόγραμμα περιήγησης του αναγνώστη τη θέση μιας πιθανής τροφοδοσίας γραμμής, η οποία θα εκτελείται μόνο όταν είναι απαραίτητο (η λεγόμενη "μαλακή" τροφοδοσία γραμμής). Αυτό μπορεί να γίνει τοποθετώντας μια ετικέτα στη σωστή θέση στο κείμενο (Λέξη BReak), η οποία είναι ίδια με την ετικέτα , δεν χρειάζεται ετικέτα κλεισίματος.
Κείμενο CSS3Περιλαμβάνει ιδιότητες κειμένου που βοηθούν στην επίλυση προβλημάτων με την αναδίπλωση κειμένου και την περικοπή κειμένου εντός του περιεχομένου.
Ιδιότητες CSS3 για μορφοποίηση κειμένου
1. Περικοπή της γραμμής υπερχείλισης κειμένου
Η ιδιότητα σάς επιτρέπει να περιορίσετε το μήκος του κειμένου όταν δεν χωράει στο κοντέινερ, κόβοντάς το οπτικά ή εμφανίζοντάς το με ελλείψεις. Η ιδιότητα λειτουργεί μόνο εάν καθορίζονται οι ακόλουθες συνθήκες: πρέπει να οριστεί το πλάτος του κοντέινερ, το στοιχείο πρέπει να έχει τις τιμές υπερχείλιση: κρυφό και κενό διάστημα: nowrap . Δεν κληρονομείται.
Σε μια κανονική κατάσταση, οι λέξεις εισάγονται με παύλα σε μια άλλη γραμμή όπου υπάρχουν κενά ή παύλες ("μαλακή παύλα") ή στην περίπτωση αναγκαστικής παύλασης χρησιμοποιώντας το στοιχείο . Αυτή η ιδιοκτησίασας επιτρέπει να ορίσετε κανόνες συλλαβισμού μέσα στις λέξεις, έτσι ώστε οι μεγάλες γραμμές να γεμίζουν πλήρως το χώρο μέσα στο δοχείο. Δεν χρησιμοποιείται για γλώσσες CJK (Κινεζικά-Ιαπωνικά-Κορεατικά). Κληρονόμησε.
Σύνταξη
P (διάλειμμα λέξεων: κανονικό;) p (διάλειμμα λέξεων: σπάσιμο όλων;) p (διάλειμμα λέξεων: κρατώ όλα;)
3. Αναδίπλωση λέξεων σε γραμμή αναδίπλωσης λέξεων
Χρησιμοποιείται σε περιπτώσεις που το κείμενο δεν χωράει στο κοντέινερ του και ξεφεύγει από τα σύνορά του. Ας σκίσουμε μεγάλα λόγιακαι μεταφέρετέ τα σε επόμενη γραμμή. Κληρονόμησε. Ενεργοποιείται μόνο εάν η τιμή του λευκού διαστήματος επιτρέπει αλλαγές γραμμής.
Καθορίστε πώς να τυλίξετε μεγάλες λέξεις:
μόνο όπου υπάρχει παύλα, κενό ή Enter (εκτός. μη σπάζοντας χώροκαι μια συνεχόμενη παύλα ‑). Μια παύλα γράφεται ανάμεσα σε μέρη μιας λέξης (για παράδειγμα, κόκκινο-κίτρινο) και μια παύλα μεταξύ των λέξεων. "Απαλή παύλα" - εμφανίζεται μόνο όταν απαιτείται μεταφορά. Αν η λέξη ξεπερνά το γονιό, τότε ή μεταφέρει το μέρος του χωρίς γραμμή. ΣΕ μαθηματικές εκφράσειςχρησιμοποιείται το μείον (για παράδειγμα, 5 − 2). Οι αριθμοί τηλεφώνου εμφανίζουν μια γραμμή ψηφίων (για παράδειγμα, +7 800 000‒00‒00). Και όλα αυτά δεν είναι το ίδιο γνώριμο πράγμα που υπάρχει στο πληκτρολόγιο.
μετά από οποιοδήποτε χαρακτήρα.
σύμφωνα με τους κανόνες της ρωσικής γλώσσας με αυτόματη εφαρμογήενωτικό.
υπερχείλιση-τύλιγμα αναδίπλωση λέξης διάλειμμα λέξεων διακοπή της γραμμής παύλες
τα χίλια εννιακόσια ενενήντα εννέα κιλά μας έχουν ήδη επανελεγχθεί ανυψωτικό-μπουλντόζα-φορτωτής
lang="ru"lang="ru">Τα χίλια εννιακόσια ενενήντα εννέα μας έχουν ήδη επανελεγχθεί -
κιλό ξεριζωτικό-μπουλντόζα-φορτωτής
Ποια είναι η διαφορά μεταξύ ενός ακινήτου και ενός άλλου;
Από προεπιλογή, οι μεγάλες λέξεις δεν φέρουν παύλα εκτός εάν υποδεικνύονται ρητά με παύλα και ξεκινούν από μια νέα γραμμή.
Προκειμένου να αγνοηθούν οι παύλες που είναι άμεσα ορατές στο μάτι, προσθέτουμε διάλειμμα λέξεων: keep-all; .
Για να αποτρέψετε το πρόγραμμα περιήγησης να δώσει προσοχή στη μαλακή παύλα, εισαγάγετε παύλες: κανένα; .
Εάν απαιτείται αναδίπλωση λέξης, τότε λέξη-αναδίπλωση: break-word; Σας συμβουλεύω να το χρησιμοποιείτε πάντα, αφού είναι κατανοητό από όλους τους φυλλομετρητές. Είναι διαφορετικό από το word-break: break-all; , το οποίο έχει προτεραιότητα στο ότι οι λέξεις που δεν ταιριάζουν στο μπλοκ ξεκινούν σε νέα γραμμή και λαμβάνεται υπόψη η σύσταση μαλακής παύλας.
Στο μοιρασιάλέξη-διάλειμμα: break-all; με παύλες: auto; , το τελευταίο αγνοείται. παύλες: auto; Τοποθετεί τυχόν παύλες κατά την κρίση του. Αλλά για να λειτουργήσει, πρέπει να υποδείξετε τη γλώσσα σας προσδιορίζοντας το χαρακτηριστικό lang="ru" στο div.
Μην τυλίγετε λέξεις σε άλλη γραμμή
Ας υποθέσουμε ότι ένα στοιχείο μενού ή ένα κουμπί δεν θα είναι καλό αν σπάσει. Επομένως, ο διαχωρισμός τους πρέπει να απαγορευτεί. Για να γίνει αυτό, όλες οι παραπάνω ιδιότητες θα πρέπει να ρυθμιστούν σε "προεπιλεγμένη" λειτουργία και να προστεθούν. Κάντε κλικ και δείτε το προπονητικό μας γήπεδο.
