Text

Dokumentation och exempel för vanliga textverktyg för att styra justering, lindning, vikt och mer.

Textjustering

Justera enkelt text till komponenter med textjusteringsklasser.

Viss platshållartext för att visa justerad textjustering. Kommer du att göra detsamma för mig? Det är dags att möta musiken. Jag är inte längre din musa. Hört att det är vackert, var domaren och mina tjejer ska rösta. Jag kan känna en fenix inom mig. Himlen är avundsjuk på vår kärlek, änglar gråter uppifrån. Ja, du tar mig till utopin.

<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 vänster-, höger- och mittjustering finns responsiva klasser tillgängliga som använder samma brytpunkter för visningsportbredden som rutnätssystemet.

Vänsterjusterad text på alla visningsportstorlekar.

Centrerad text på alla visningsportstorlekar.

Högerjusterad text på alla visningsportstorlekar.

Vänsterjusterad text på visningsportar i storleken SM (liten) eller bredare.

Vänsterjusterad text på visningsportar i storleken MD (medium) eller bredare.

Vänsterjusterad text på visningsportar i storleken LG (stor) eller bredare.

Vänsterjusterad text på visningsportar i storlek XL (extra-large) eller bredare.

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

Textomslag och överflöd

Slå in text med en .text-wrapklass.

Denna text bör omslutas.

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

Förhindra text från att radbrytas med en .text-nowrapklass.

Denna text bör svämma över föräldern.

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

För längre innehåll kan du lägga till en .text-truncateklass för att trunkera texten med en ellips. Kräver display: inline-blockeller 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>

Ordbrytning

Förhindra långa textsträngar från att bryta dina komponenters layout genom att använda .text-breakför att ställa in word-wrap: break-wordoch word-break: break-word. Vi använder word-wrapistället för det vanligare overflow-wrapför bredare webbläsarstöd, och lägger till de föråldrade word-break: break-wordför att undvika problem med flexbehållare.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Textförvandling

Omvandla text i komponenter med textklasser för versaler.

Text med små bokstäver.

Text med versaler.

Kapitaliserad text.

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

Notera hur .text-capitalizeendast den första bokstaven i varje ord ändras, så att alla andra bokstäver inte påverkas av versaler.

Teckensnittsvikt och kursiv stil

Ändra snabbt textens vikt (fethet) eller kursivera text.

Fettext.

Djärvare text (i förhållande till det överordnade elementet).

Normal vikt text.

Lättviktig text.

Lättare text (i förhållande till det överordnade elementet).

Kursiv 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

Ändra ett urval till vår monospace-fontstack med .text-monospace.

Det här är i monospace

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

Återställ färg

Återställ en text eller länks färg med .text-reset, så att den ärver färgen från sin överordnade.

Avstängd text med en återställningslänk .

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

Text dekoration

Ta bort en textdekoration med en .text-decoration-noneklass.

Ej understruken länk

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