Die Anleitung zu Bootstrap Text Utility

Text Alignment (die Text Ausrichtung)
Text wrapping & overflow
Text transform (die Text transformieren)
Font weight & italic
Monospaced Font

1. Text Alignment (die Text Ausrichtung)

text-justify-example

<h4>.text-justify</h4>
<p class="text-justify">
   In my younger and more vulnerable years my father gave me some advice that
   I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me,
   'just remember that all the people in this world haven't had the advantages that you've had.'
</p>

text-alignment-example

<h4 class="mb-3">Text Alignment</h4>

<p class="text-left">(.text-left) Left aligned text.</p>
<p class="text-center">(.text-center) Center aligned text.</p>
<p class="text-right">(.text-right) Right aligned text.</p>

Die anderen Klasse können in der Situation "Responsive" verwendet werden:

text-left
text-center
text-right
text-sm-left
text-sm-center
text-sm-right
text-md-left
text-md-center
text-md-right
text-lg-left
text-lg-center
text-lg-right
text-xl-left
text-xl-center
text-xl-right

text-alignment-responsive-example

<h4 class="mb-3">Text Alignment</h4>

<p class="text-left text-sm-center text-md-right">
   (.text-left .text-sm-center .text-md-right)
</p>

2. Text wrapping & overflow

Wrapping ist ein Phänomen, in dem eine Teil der Text in die unten Linien geschoben wird wenn die Länge der Text größer als die Breite des Vater-Element ist.

text-wrapping-example

<h4>Text Wrapping</h4>
<div class="border border-danger">
  Bootstrap is a free and open-source front-end framework.
</div>

Die Klasse .text-nowrap für Vater-Element anwenden um das Phänomen wrapping zu lösen, aber Sie werden den Überlauf (overflow) der Text aus dem Vater-Element sehen.

text-nowrap-example

<h4 class="mb-4">.text-nowrap</h4>

<div class="text-nowrap border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>

Um die Text-Inhalt aus dem Vater-Element überzulaufen (overflow), können Sie die Klasse .text-truncate zur Anwendung für das Vater-Element anwenden. Die Überlaufsinhalt wird versteckt und die drei Punkte entsteht am Ende der Text.

Die Klasse .text-truncate wendet nur für die Elemente, die {display:block} oder {display:inline-block} eingestellt werden. Achtung: Default <div>,<p> wird {display:block} eingestellt.

text-truncate-example

<h4 class="mb-4">.text-truncate</h4>

<div class="text-truncate border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>

3. Text transform (die Text transformieren)

Bootstrap bietet einige Klasse um die Text zu transformieren (transform).

Die Klasse	Die Bezeichnung
.text-lowercase	Die Text in die Kleinbuchstabe (lowercase) transformieren.
.text-uppercase	Die Text in die Großbuchstabe (uppercase) transformieren.
.text-capitalize	Alle die ersten Zeichen von jeder Buchstabe werden die Großbuchstabe sein, und die anderen Buchstabe werden nicht ändern.

text-transform-example

<h4 class="mb-3">Origin Text:</h4>
<p>bootSTrap teXt</p>
<hr>
<h5>.text-lowercase</h5>
<p class="text-lowercase">bootSTrap teXt</p>
<h5>.text-uppercase</h5>
<p class="text-uppercase">bootSTrap teXt</p>
<h5>.text-capitalize</h5>
<p class="text-capitalize">bootSTrap teXt</p>

4. Font weight & italic

Um das Gewicht und den kursiven Stil (italic style) für die Text im CSS zu bauen, verwenden Sie die folgenden Maßnahmen:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

font-style: normal;
font-style: italic;
font-style:oblique;

Statt von der Verwendung der obengemeinten Css property können Sie die eingebauten Klasse vom Bootstrap verwenden:

.font-weight-bold
.font-weight-normal
.font-weight-light
.font-italic

font-weight-italic-example

<h4 class="mb-3">Font weight, italic</h4>

<p class="font-weight-bold">(.font-weight-bold) Bold text.</p>
<p class="font-weight-normal">(.font-weight-normal) Normal weight text.</p>
<p class="font-weight-light">(.font-weight-light) Light weight text.</p>
<p class="font-italic">(.font-italic) Italic text.</p>

5. Monospaced Font

Monospaced Font: ist die Schriftart (font), indem jedes Zeichen (character) die gleichen horizontalen Länge hat. Es ist wie die folgende Illustration:

Monospace Font mit CSS verwenden:

font-family: monospace;

Monospace Font mit Bootstrap verwenden:

text-monospace-example.html

<div style="font-size:32px;">Default Font</div>
<div class="text-monospace" style="font-size:32px;">Monospace Font</div>