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.

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

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 Textzeichenfolgen das Layout Ihrer Komponenten beeinträchtigen, indem Sie .text-breakto set overflow-wrap: break-word(und word-break: break-wordfür IE- und Edge-Kompatibilität) verwenden.

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>