Source

Κείμενο

Τεκμηρίωση και παραδείγματα για κοινά βοηθητικά προγράμματα κειμένου για τον έλεγχο της στοίχισης, της αναδίπλωσης, του βάρους και πολλά άλλα.

Στοίχιση κειμένου

Εύκολη ευθυγράμμιση κειμένου σε στοιχεία με κλάσεις στοίχισης κειμένου.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. Στο nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</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.

Praeterea iter est quasdam res quas ex communi.

<!-- 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το set overflow-wrap: break-word(και word-break: break-wordγια συμβατότητα IE & Edge).

μμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμμ...

<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>