Text

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

Textausrichtung

Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus.

Einige Platzhaltertexte zur Veranschaulichung der ausgerichteten Textausrichtung. Wirst du das gleiche für mich tun? Es ist Zeit, sich der Musik zu stellen, ich bin nicht länger deine Muse. Ich habe gehört, es ist wunderschön, sei der Richter und meine Mädels werden abstimmen. Ich spüre einen Phönix in mir. Der Himmel ist eifersüchtig auf unsere Liebe, Engel weinen von oben. Ja, du bringst mich in die Utopie.

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

Für die linke, rechte und zentrierte Ausrichtung sind reaktionsschnelle Klassen verfügbar, die dieselben Breakpoints für die Ansichtsfensterbreite wie das Rastersystem verwenden.

Linksbündiger Text in allen Ansichtsfenstergrößen.

Zentrieren Sie ausgerichteten Text in allen Ansichtsfenstergrößen.

Rechtsbündiger Text in allen Ansichtsfenstergrößen.

Linksbündiger Text in Ansichtsfenstern der Größe SM (klein) oder breiter.

Linksbündiger Text in Ansichtsfenstern der Größe MD (mittel) oder breiter.

Linksbündiger Text in Ansichtsfenstern mit der Größe LG (groß) oder breiter.

Linksbündiger Text in Ansichtsfenstern der Größe XL (extra groß) oder breiter.

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

Textumbruch und Überlauf

Text mit einer .text-wrapKlasse umbrechen.

Dieser Text sollte umbrechen.

<div class="badge badge-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>

Bei längeren Inhalten können Sie eine .text-truncateKlasse hinzufügen, um den Text mit Auslassungspunkten abzuschneiden. Benötigt display: inline-blockoder 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>

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>

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.

Schriftstärke und Kursivschrift

Ändern Sie schnell die Stärke (Fettschrift) von Text oder setzen Sie Text kursiv.

Fetter Text.

Fettgedruckter Text (relativ zum übergeordneten Element).

Normalgewichtiger Text.

Leichter Text.

Leichterer Text (relativ zum übergeordneten Element).

Kursiver Text.

<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

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

Dies ist im Monospace

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

Entfernen Sie eine Textdekoration mit einer .text-decoration-noneKlasse.

Nicht unterstrichener Link

<a href="#" class="text-decoration-none">Non-underlined link</a>