Κείμενο

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

Σε αυτήν την σελίδα

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

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

Έναρξη στοιχισμένου κειμένου σε όλα τα μεγέθη θυρών προβολής.

Κείμενο στοίχισης στο κέντρο σε όλα τα μεγέθη θυρών προβολής.

Τερματισμός στοιχισμένου κειμένου σε όλα τα μεγέθη θυρών προβολής.

Ξεκινήστε το στοιχισμένο κείμενο σε θύρες προβολής μεγέθους SM (μικρό) ή μεγαλύτερο.

Ξεκινήστε το στοιχισμένο κείμενο σε θύρες προβολής μεγέθους MD (μεσαίο) ή ευρύτερο.

Ξεκινήστε το στοιχισμένο κείμενο σε θύρες προβολής μεγέθους LG (μεγάλο) ή μεγαλύτερο.

Ξεκινήστε το στοιχισμένο κείμενο σε θύρες προβολής μεγέθους XL (εξαιρετικά μεγάλο) ή ευρύτερο.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

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

Αναδίπλωση και υπερχείλιση κειμένου

Αναδίπλωση κειμένου με μια .text-wrapτάξη.

Αυτό το κείμενο πρέπει να αναδιπλωθεί.

<div class="badge bg-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-breakτο για να ορίσετε word-wrap: break-wordκαι word-break: break-word. Χρησιμοποιούμε word-wrapαντί για το πιο συνηθισμένο overflow-wrapγια ευρύτερη υποστήριξη του προγράμματος περιήγησης και προσθέτουμε το καταργημένο word-break: break-wordγια να αποφύγουμε προβλήματα με τα ευέλικτα κοντέινερ.

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

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Σημειώστε ότι το σπάσιμο των λέξεων δεν είναι δυνατό στα αραβικά , που είναι η πιο χρησιμοποιούμενη γλώσσα RTL. Επομένως .text-break, αφαιρείται από το μεταγλωττισμένο CSS RTL.

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

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

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

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

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Σημειώστε πώς .text-capitalizeαλλάζει μόνο το πρώτο γράμμα κάθε λέξης, αφήνοντας ανεπηρέαστη την κεφαλαία των άλλων γραμμάτων.

Μέγεθος γραμματοσειράς

Αλλάξτε γρήγορα το font-sizeκείμενο. Ενώ οι κατηγορίες επικεφαλίδων μας (π.χ., .h1– .h6) ισχύουν font-size, font-weight, και line-height, αυτά τα βοηθητικά προγράμματα ισχύουν μόνοfont-size . Το μέγεθος για αυτά τα βοηθητικά προγράμματα ταιριάζει με τα στοιχεία επικεφαλίδας του HTML, επομένως όσο αυξάνεται ο αριθμός, το μέγεθός τους μειώνεται.

.fs-1 κείμενο

.fs-2 κείμενο

.fs-3 κείμενο

.fs-4 κείμενο

.fs-5 κείμενο

.fs-6 κείμενο

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Προσαρμόστε τα διαθέσιμα σας font-sizeτροποποιώντας τον $font-sizesχάρτη Sass.

Βάρος γραμματοσειράς και πλάγια γράμματα

Αλλάξτε γρήγορα το font-weightή font-styleτου κειμένου με αυτά τα βοηθητικά προγράμματα. font-styleΤα βοηθητικά προγράμματα συντομεύονται ως .fst-*και τα font-weightβοηθητικά προγράμματα συντομεύονται ως .fw-*.

Εντονο Κείμενο.

Κείμενο με μεγαλύτερο βάρος (σε σχέση με το γονικό στοιχείο).

Κείμενο κανονικού βάρους.

Ελαφρύ κείμενο.

Κείμενο μικρότερου βάρους (σε σχέση με το γονικό στοιχείο).

Πλάγιο κείμενο.

Κείμενο με κανονικό στυλ γραμματοσειράς

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Υψος γραμμής

Αλλάξτε το ύψος της γραμμής με .lh-*βοηθητικά προγράμματα.

Αυτή είναι μια μεγάλη παράγραφος που γράφτηκε για να δείξει πώς το ύψος γραμμής ενός στοιχείου επηρεάζεται από τα βοηθητικά μας προγράμματα. Οι κλάσεις εφαρμόζονται στο ίδιο το στοιχείο ή μερικές φορές στο γονικό στοιχείο. Αυτές οι κλάσεις μπορούν να προσαρμοστούν ανάλογα με τις ανάγκες με το βοηθητικό μας API.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Μονοδιάστημα

Αλλάξτε μια επιλογή στη στοίβα γραμματοσειρών monospace με .font-monospace.

Αυτό είναι στο monospace

<p class="font-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>

Διακόσμηση κειμένου

Διακοσμήστε κείμενο σε στοιχεία με μαθήματα διακόσμησης κειμένου.

Αυτό το κείμενο έχει μια γραμμή από κάτω.

Αυτό το κείμενο έχει μια γραμμή που το περνάει.

Αυτός ο σύνδεσμος έχει αφαιρέσει τη διακόσμηση κειμένου του

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass

Μεταβλητές

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Χάρτες

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

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

Utilities API

Τα βοηθητικά προγράμματα γραμματοσειράς και κειμένου δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),