Source

Text

Documentație și exemple pentru utilitare de text obișnuite pentru a controla alinierea, împachetarea, greutatea și multe altele.

Alinierea textului

Realliniați cu ușurință textul la componente cu clase de aliniere a textului.

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

Pentru alinierea la stânga, la dreapta și la centru, sunt disponibile clase receptive care utilizează aceleași puncte de întrerupere pentru lățimea ferestrei de vizualizare ca și sistemul de grilă.

Text aliniat la stânga pe toate dimensiunile ferestrelor de vizualizare.

Centrare textul aliniat pe toate dimensiunile ferestrelor de vizualizare.

Text aliniat la dreapta pe toate dimensiunile ferestrelor de vizualizare.

Text aliniat la stânga pe ferestrele de dimensiune SM (mic) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune MD (medie) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune LG (mari) sau mai late.

Text aliniat la stânga pe ferestrele de dimensiune XL (extra-mari) sau mai late.

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

Împachetare și depășire a textului

Încheierea textului cu o .text-wrapclasă.

Acest text ar trebui să se încheie.

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

Preveniți încheierea textului cu o .text-nowrapclasă.

Acest text ar trebui să depășească părintele.

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

Pentru conținut mai lung, puteți adăuga o .text-truncateclasă pentru a trunchia textul cu puncte de suspensie. Necesită display: inline-blocksau 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>

Pauza de cuvânt

Preveniți șirurile lungi de text să rupă aspectul componentelor dvs. utilizând .text-breakto set overflow-wrap: break-word(și word-break: break-wordpentru compatibilitatea IE și Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Transformarea textului

Transformați textul în componente cu clase de scriere cu majuscule.

Text cu litere mici.

Text cu majuscule.

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

Observați cum .text-capitalizese schimbă doar prima literă a fiecărui cuvânt, lăsând neafectat litera majusculei altor litere.

Greutatea fontului și caracterele cursive

Schimbați rapid greutatea (îndrăzneala) textului sau scrieți cu italice.

Text îngroșat.

Text cu greutate mai îngroșată (față de elementul părinte).

Text cu greutate normală.

Text ușor.

Text mai ușor (față de elementul părinte).

Text italic.

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

Monospațiu

Schimbați o selecție în stiva noastră de fonturi monospace cu .text-monospace.

Aceasta este în monospațiu

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

Resetează culoarea

Resetați culoarea unui text sau a unui link cu .text-reset, astfel încât să moștenească culoarea de la părintele său.

Text dezactivat cu un link de resetare .

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

Decorare text

Eliminați un decor text cu o .text-decoration-noneclasă.

Link nesubliniat

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