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-nowrapτάξη.

Αυτό το κείμενο θα πρέπει να ξεχειλίζει τον γονέα. 
<div class="text-nowrap" 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.
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>

Μετασχηματισμός κειμένου

Μετασχηματισμός κειμένου σε στοιχεία με τάξεις κεφαλαίων κειμένου.

Κείμενο με πεζά γράμματα.

Κείμενο με κεφαλαία γράμματα.

Κείμενο με κεφαλαία.

<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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>