Text

Dokumentation und Beispiele für gängige Texthilfsprogramme zur Steuerung von Ausrichtung, Umbruch, Gewichtung und mehr.

Auf dieser Seite

Textausrichtung

Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus. Für die Start-, End- und Mittenausrichtung sind reaktionsfähige Klassen verfügbar, die dieselben Breakpoints für die Ansichtsfensterbreite wie das Rastersystem verwenden.

Beginnen Sie mit ausgerichtetem Text in allen Ansichtsfenstergrößen.

Zentrieren Sie ausgerichteten Text in allen Ansichtsfenstergrößen.

Beenden Sie ausgerichteten Text auf allen Ansichtsfenstergrößen.

Beginnen Sie ausgerichteten Text in Ansichtsfenstern der Größe SM (klein) oder breiter.

Beginnen Sie ausgerichteten Text in Ansichtsfenstern der Größe MD (mittel) oder breiter.

Beginnen Sie ausgerichteten Text in Ansichtsfenstern mit der Größe LG (groß) oder breiter.

Beginnen Sie ausgerichteten Text in Ansichtsfenstern der Größe XL (extra groß) oder breiter.

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

Beachten Sie, dass wir keine Hilfsklassen für Blocksatz bereitstellen. Obwohl Blocksatz ästhetisch ansprechender aussehen mag, macht er die Wortabstände zufälliger und daher schwerer lesbar.

Textumbruch und Überlauf

Text mit einer .text-wrapKlasse umbrechen.

Dieser Text sollte umbrechen.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Verhindern Sie, dass Text mit einer .text-nowrapKlasse umbrochen wird.

Dieser Text sollte den Elternteil überlaufen lassen.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Wortbruch

Verhindern Sie, dass lange Textfolgen das Layout Ihrer Komponenten beeinträchtigen, indem Sie .text-breakto set word-wrap: break-wordund verwenden word-break: break-word. Wir verwenden word-wrapanstelle des gebräuchlicheren overflow-wrapfür eine breitere Browserunterstützung und fügen das veraltete hinzu word-break: break-word, um Probleme mit Flex-Containern zu vermeiden.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Beachten Sie, dass das Trennen von Wörtern in Arabisch , der am häufigsten verwendeten RTL-Sprache, nicht möglich ist. Daher .text-breakwird aus unserem RTL kompilierten CSS entfernt.

Textumwandlung

Wandeln Sie Text in Komponenten mit Textgroßschreibungsklassen um.

Kleingeschriebener Text.

Großgeschriebener Text.

GROSSGESCHRIEBENER TEXT.

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

Beachten Sie, dass .text-capitalizenur der erste Buchstabe jedes Wortes geändert wird, wobei die Groß- und Kleinschreibung aller anderen Buchstaben unbeeinflusst bleibt.

Schriftgröße

Ändern Sie schnell den font-sizeText. Während unsere Überschriftenklassen (z. B. .h1– .h6) , , und anwenden font-size, gelten diese Hilfsprogramme nur . Die Größe dieser Dienstprogramme entspricht den Überschriftselementen von HTML, sodass ihre Größe mit zunehmender Anzahl abnimmt.font-weightline-heightfont-size

.fs-1-Text

.fs-2-Text

.fs-3-Text

.fs-4-Text

.fs-5-Text

.fs-6-Text

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

Passen Sie Ihre verfügbaren font-sizes an, indem Sie die $font-sizesSass-Karte ändern.

Schriftstärke und Kursivschrift

Ändern Sie schnell das font-weightoder font-stylevon Text mit diesen Dienstprogrammen. font-styleDienstprogramme werden als abgekürzt .fst-*und font-weightDienstprogramme werden als abgekürzt .fw-*.

Fetter Text.

Fettgedruckter Text (relativ zum übergeordneten Element).

Normalgewichtiger Text.

Leichter Text.

Leichterer Text (relativ zum übergeordneten Element).

Kursiver Text.

Text mit normaler Schriftart

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

Zeilenhöhe

Ändern Sie die Zeilenhöhe mit .lh-*Dienstprogrammen.

Dies ist ein langer Absatz, der geschrieben wurde, um zu zeigen, wie die Zeilenhöhe eines Elements von unseren Hilfsprogrammen beeinflusst wird. Klassen werden auf das Element selbst oder manchmal auf das übergeordnete Element angewendet. Diese Klassen können nach Bedarf mit unserer Utility-API angepasst werden.

<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

Ändern Sie eine Auswahl mit in unseren Monospace-Schriftstapel .font-monospace.

Dies ist im Monospace

<p class="font-monospace">This is in monospace</p>

Farbe zurücksetzen

Setzen Sie die Farbe eines Textes oder Links mit zurück .text-reset, sodass er die Farbe von seinem übergeordneten Element erbt.

Stummgeschalteter Text mit einem Link zum Zurücksetzen .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Textdekoration

Dekorieren Sie Text in Komponenten mit Textdekorationsklassen.

Dieser Text hat eine Linie darunter.

Dieser Text wird von einer Linie durchzogen.

Bei diesem Link wurde die Textdekoration entfernt

<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

Variablen

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

Karten

Dienstprogramme in Schriftgröße werden aus dieser Karte in Kombination mit unserer Dienstprogramme-API generiert.

$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
);

Dienstprogramme-API

Schriftart- und Textdienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

    "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
    ),