Κείμενο
Τεκμηρίωση και παραδείγματα για κοινά βοηθητικά προγράμματα κειμένου για τον έλεγχο της στοίχισης, της αναδίπλωσης, του βάρους και πολλά άλλα.
Στοίχιση κειμένου
Εύκολη ευθυγράμμιση κειμένου σε στοιχεία με κλάσεις στοίχισης κειμένου.
Κάποιο κείμενο κράτησης θέσης για να επιδείξει αιτιολογημένη στοίχιση κειμένου. Θα κάνεις το ίδιο για μένα; Ήρθε η ώρα να αντιμετωπίσεις τη μουσική Δεν είμαι πια η μούσα σου. Άκουσα ότι είναι όμορφο, γίνετε ο κριτής και τα κορίτσια μου θα ψηφίσουν. Μπορώ να νιώσω έναν φοίνικα μέσα μου. Ο Παράδεισος ζηλεύει την αγάπη μας, οι άγγελοι κλαίνε από ψηλά. Ναι, με πας στην ουτοπία.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>Για αριστερή, δεξιά και στοίχιση στο κέντρο, είναι διαθέσιμες κλάσεις απόκρισης που χρησιμοποιούν τα ίδια σημεία διακοπής πλάτους θυρών προβολής με το σύστημα πλέγματος.
Κείμενο με αριστερή στοίχιση σε όλα τα μεγέθη θυρών προβολής.
Κείμενο στοίχισης στο κέντρο σε όλα τα μεγέθη θυρών προβολής.
Δεξιά στοίχιση κειμένου σε όλα τα μεγέθη θυρών προβολής.
Κείμενο με αριστερή στοίχιση σε θύρες προβολής μεγέθους SM (μικρό) ή μεγαλύτερο.
Κείμενο με αριστερή στοίχιση σε θύρες προβολής μεγέθους MD (μεσαίο) ή ευρύτερο.
Κείμενο με αριστερή στοίχιση σε θύρες προβολής μεγέθους LG (μεγάλο) ή μεγαλύτερο.
Κείμενο με αριστερή στοίχιση σε θύρες προβολής μεγέθους XL (εξαιρετικά μεγάλο) ή μεγαλύτερο.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Αναδίπλωση και υπερχείλιση κειμένου
Αναδίπλωση κειμένου με μια .text-wrapτάξη.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Αποτρέψτε την αναδίπλωση κειμένου με μια .text-nowrapτάξη.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Για μεγαλύτερο περιεχόμενο, μπορείτε να προσθέσετε μια .text-truncateτάξη για να περικόψετε το κείμενο με μια έλλειψη. Απαιτεί display: inline-blockή display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Διάλειμμα λέξεων
Αποτρέψτε τις μεγάλες συμβολοσειρές κειμένου από το να σπάσουν τη διάταξη των στοιχείων σας χρησιμοποιώντας .text-breakτο για να ορίσετε word-wrap: break-wordκαι word-break: break-word. Χρησιμοποιούμε word-wrapαντί για το πιο συνηθισμένο overflow-wrapγια ευρύτερη υποστήριξη του προγράμματος περιήγησης και προσθέτουμε το καταργημένο word-break: break-wordγια να αποφύγουμε προβλήματα με τα ευέλικτα κοντέινερ.
μμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμ...
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Μετασχηματισμός κειμένου
Μετασχηματισμός κειμένου σε στοιχεία με τάξεις κεφαλαίων κειμένου.
Κείμενο με πεζά γράμματα.
Κείμενο με κεφαλαία γράμματα.
Κείμενο με κεφαλαία.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Σημειώστε πώς .text-capitalizeαλλάζει μόνο το πρώτο γράμμα κάθε λέξης, αφήνοντας ανεπηρέαστη την κεφαλαία των άλλων γραμμάτων.
Βάρος γραμματοσειράς και πλάγια γράμματα
Αλλάξτε γρήγορα το βάρος (έντονη) του κειμένου ή κάντε πλάγιο κείμενο.
Εντονο Κείμενο.
Κείμενο με μεγαλύτερο βάρος (σε σχέση με το γονικό στοιχείο).
Κείμενο κανονικού βάρους.
Ελαφρύ κείμενο.
Κείμενο μικρότερου βάρους (σε σχέση με το γονικό στοιχείο).
Πλάγιο κείμενο.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>Μονοδιάστημα
Αλλάξτε μια επιλογή στη στοίβα γραμματοσειρών monospace με .text-monospace.
Αυτό είναι στο monospace
<p class="text-monospace">This is in monospace</p>Επαναφορά χρώματος
Επαναφέρετε το χρώμα ενός κειμένου ή συνδέσμου με .text-reset, έτσι ώστε να κληρονομήσει το χρώμα από τον γονέα του.
Κείμενο σε σίγαση με σύνδεσμο επαναφοράς .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Διακόσμηση κειμένου
Αφαιρέστε μια διακόσμηση κειμένου με μια .text-decoration-noneτάξη.
<a href="#" class="text-decoration-none">Non-underlined link</a>