Tekst

Dokumentation og eksempler på almindelige tekstværktøjer til at kontrollere justering, ombrydning, vægt og mere.

På denne side

Tekstjustering

Juster nemt tekst til komponenter med tekstjusteringsklasser. Til start-, slut- og centerjustering er responsive klasser tilgængelige, der bruger de samme visningsportsbreddebrudpunkter som gittersystemet.

Start justeret tekst på alle visningsportstørrelser.

Centreret tekst på alle visningsportstørrelser.

Afslut justeret tekst på alle visningsportstørrelser.

Start justeret tekst på visningsporte i størrelsen SM (lille) eller bredere.

Start justeret tekst på visningsporte i størrelsen MD (medium) eller bredere.

Start justeret tekst på visningsporte i størrelsen LG (stor) eller bredere.

Start justeret tekst på visningsporte i størrelsen XL (ekstra stor) eller bredere.

html

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

Bemærk, at vi ikke leverer hjælpeklasser til begrundet tekst. Selvom berettiget tekst æstetisk ser mere tiltalende ud, gør det ordmellemrum mere tilfældigt og derfor sværere at læse.

Tekstombrydning og overløb

Ombryd tekst med en .text-wrapklasse.

Denne tekst skal ombrydes.

html

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

Forhindre tekst i at ombryde med en .text-nowrapklasse.

Denne tekst bør flyde over forælderen.

html

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

Ordbrud

Forhindr lange tekststrenge i at bryde dine komponenters layout ved at bruge .text-breaktil at indstille word-wrap: break-wordog word-break: break-word. Vi bruger word-wrapi stedet for det mere almindelige overflow-wraptil bredere browserunderstøttelse og tilføjer de forældede word-break: break-wordfor at undgå problemer med flex-containere.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Bemærk, at det ikke er muligt at bryde ord på arabisk , som er det mest brugte RTL-sprog. Er derfor .text-breakfjernet fra vores RTL kompilerede CSS.

Tekst transformation

Transform tekst i komponenter med tekstklasser med store bogstaver.

Tekst med små bogstaver.

Tekst med store bogstaver.

Kapitaliseret tekst.

html

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

Bemærk, hvordan .text-capitalizekun det første bogstav i hvert ord ændres, så der ikke påvirkes store og små bogstaver i andre bogstaver.

Skriftstørrelse

Skift hurtigt font-sizeteksten. Mens vores overskriftsklasser (f.eks. .h1– .h6) gælder font-size, font-weight, og , gælder line-heightdisse hjælpeprogrammer kunfont-size . Størrelse for disse hjælpeprogrammer matcher HTMLs overskriftselementer, så efterhånden som antallet stiger, falder deres størrelse.

.fs-1 tekst

.fs-2 tekst

.fs-3 tekst

.fs-4 tekst

.fs-5 tekst

.fs-6 tekst

html

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

Tilpas dine tilgængelige font-sizes ved at ændre $font-sizesSass-kortet.

Skriftvægt og kursiv

Skift hurtigt font-weighteller font-styleaf tekst med disse hjælpeprogrammer. font-stylehjælpeprogrammer er forkortet som .fst-*og font-weighthjælpeprogrammer forkortes som .fw-*.

Fed tekst.

Fed tekst (i forhold til det overordnede element).

Halvfed vægt tekst.

Normal vægt tekst.

Letvægts tekst.

Lettere tekst (i forhold til det overordnede element).

Kursiv tekst.

Tekst med normal skrifttype

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</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>

Linjehøjde

Skift linjehøjden med .lh-*hjælpeprogrammer.

Dette er et langt afsnit skrevet for at vise, hvordan linjehøjden af et element påvirkes af vores hjælpeprogrammer. Klasser anvendes på selve elementet eller nogle gange det overordnede element. Disse klasser kan tilpasses efter behov med vores utility API.

html

<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

Skift et valg til vores monospace skrifttypestak med .font-monospace.

Dette er i monospace

html

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

Nulstil farve

Nulstil farven på en tekst eller et link med .text-reset, så det arver farven fra sin overordnede.

Lydløs tekst med et nulstillingslink .

html

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

Tekst dekoration

Dekorer tekst i komponenter med tekstdekorationsklasser.

Denne tekst har en streg nedenunder.

Denne tekst har en linje igennem sig.

Dette link har fjernet sin tekstdekoration

html

<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", "Noto Sans", "Liberation Sans", Arial, 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(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$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-semibold:        600;
$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;

Kort

Hjælpeprogrammer i skriftstørrelse genereres fra dette kort i kombination med vores hjælpeprogrammer 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
);

Hjælpeprogrammer API

Skrift- og tekstværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger utilities API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$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,
        semibold: $font-weight-semibold,
        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
    ),