Text

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

På den här sidan

Textjustering

Justera enkelt text till komponenter med textjusteringsklasser. För start-, slut- och mittjustering finns responsiva klasser tillgängliga som använder samma brytpunkter för visningsportbredden som rutnätssystemet.

Börja justerad text på alla visningsportstorlekar.

Centrerad text på alla visningsportstorlekar.

Avsluta justerad text på alla visningsportstorlekar.

Börja justerad text på visningsportar i storleken SM (liten) eller bredare.

Börja justerad text på visningsportar i storleken MD (medium) eller bredare.

Börja justerad text på visningsportar med storleken LG (stor) eller bredare.

Börja justerad text på visningsportar i storleken XL (extra-large) eller bredare.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Observera att vi inte tillhandahåller verktygsklasser för motiverad text. Även om estetiskt sett kan motiverad text se mer tilltalande ut, gör den ordavstånd mer slumpmässigt och därför svårare att läsa.

Textomslutning och översvämning

Slå in text med en .text-wrapklass.

Denna text bör omslutas.

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

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>

Observera att det inte är möjligt att bryta ord på arabiska , som är det mest använda RTL-språket. Därför .text-breaktas den bort från vår RTL-kompilerade CSS.

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.

Textstorlek

Ändra snabbt font-sizetexten. Medan våra rubrikklasser (t.ex. .h1– .h6) gäller font-size, font-weight, och , gäller line-heightdessa verktyg endastfont-size . Storleken för dessa verktyg matchar HTMLs rubrikelement, så när antalet ökar minskar deras storlek.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Anpassa dina tillgängliga font-sizes genom att modifiera $font-sizesSass-kartan.

Teckensnittsvikt och kursiv stil

Ändra snabbt font-weighteller font-styleför text med dessa verktyg. font-styleverktyg förkortas som .fst-*och font-weightverktyg förkortas som .fw-*.

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.

Text med normal typsnittsstil

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Radavstånd

Ändra linjehöjden med .lh-*hjälpmedel.

Detta är ett långt stycke skrivet för att visa hur linjehöjden på ett element påverkas av våra verktyg. Klasser tillämpas på själva elementet eller ibland det överordnade elementet. Dessa klasser kan anpassas efter behov med vårt verktygs-API.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Monospace

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

Det här är i monospace

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

Dekorera text i komponenter med textdekorationsklasser.

Den här texten har en rad under.

Den här texten har en rad som går igenom den.

Denna länk har sin textdekoration borttagen

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass

Variabler

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Kartor

Verktyg i teckenstorlek genereras från denna karta, i kombination med vårt verktygs-API.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

Utilities API

Teckensnitt och textverktyg deklareras i vårt verktygs-API i scss/_utilities.scss. Lär dig hur du använder utilities API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),