Tekst

Dokumentacja i przykłady typowych narzędzi tekstowych do sterowania wyrównaniem, zawijaniem, wagą i nie tylko.

Na tej stronie

Wyrównanie tekstu

Łatwo wyrównuj tekst do komponentów za pomocą klas wyrównania tekstu. W przypadku wyrównania początku, końca i środka dostępne są klasy reagujące, które używają tych samych punktów przerwania szerokości rzutni, co system siatki.

Rozpocznij wyrównany tekst we wszystkich rozmiarach rzutni.

Wyśrodkowany tekst we wszystkich rozmiarach rzutni.

Zakończ wyrównany tekst we wszystkich rozmiarach rzutni.

Rozpocznij wyrównany tekst na rzutniach o rozmiarze SM (małym) lub szerszym.

Rozpocznij wyrównany tekst w obszarze roboczym o rozmiarze MD (średnim) lub szerszym.

Rozpocznij wyrównany tekst w rzutniach o rozmiarze LG (dużym) lub szerszym.

Rozpocznij wyrównany tekst w rzutniach o rozmiarze XL (bardzo duży) lub szerszym.

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>

Zauważ, że nie zapewniamy klas użytkowych dla tekstu wyjustowanego. Chociaż z estetycznego punktu widzenia wyjustowany tekst może wyglądać bardziej atrakcyjnie, sprawia, że odstępy między wyrazami są bardziej losowe, a przez to trudniejsze do odczytania.

Zawijanie i przepełnianie tekstu

Zawijaj tekst .text-wrapklasą.

Ten tekst powinien się zawijać.

html

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

Zapobiegaj zawijaniu się tekstu z .text-nowrapklasą.

Ten tekst powinien przepełniać rodzica.

html

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

Łamanie słów

Zapobiegaj łamaniu układu komponentów przez długie ciągi tekstu, używając .text-breakto set word-wrap: break-wordi word-break: break-word. Używamy word-wrapzamiast bardziej powszechnego overflow-wrapdla szerszej obsługi przeglądarek i dodajemy przestarzałe word-break: break-word, aby uniknąć problemów z kontenerami elastycznymi.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Pamiętaj, że łamanie słów nie jest możliwe w języku arabskim , który jest najczęściej używanym językiem RTL. W związku z tym .text-breakjest usuwany z naszego CSS skompilowanego RTL.

Przekształcenie tekstu

Przekształć tekst w komponenty za pomocą klas pisania wielkimi literami.

Tekst pisany małymi literami.

Tekst pisany wielkimi literami.

html

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

Zwróć uwagę, jak .text-capitalizezmienia się tylko pierwsza litera każdego słowa, pozostawiając wielkość liter bez zmian.

Rozmiar czcionki

Szybko zmień font-sizetekst. Chociaż nasze klasy nagłówków (np. .h1– .h6) mają zastosowanie font-size, font-weight, i line-height, te narzędzia mają zastosowanie tylkofont-size . Rozmiary tych narzędzi odpowiadają elementom nagłówka HTML, więc wraz ze wzrostem liczby ich rozmiar maleje.

tekst .fs-1

tekst .fs-2

tekst .fs-3

tekst .fs-4

tekst .fs-5

tekst .fs-6

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>

Dostosuj swoje dostępne font-sizes, modyfikując $font-sizesmapę Sass.

Grubość czcionki i kursywa

Dzięki tym narzędziom możesz szybko zmienić ory font-weighttekstu font-style. font-stylenarzędzia są skrócone do , .fst-*a font-weightnarzędzia są skrócone do .fw-*.

Pogrubiony tekst.

Tekst wagi pogrubionej (w stosunku do elementu nadrzędnego).

Tekst wagi półgruby.

Tekst o normalnej wadze.

Lekki tekst.

Tekst o mniejszej wadze (w stosunku do elementu nadrzędnego).

Tekst kursywą.

Tekst z normalnym stylem czcionki

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>

Wysokość linii

Zmień wysokość linii za pomocą .lh-*narzędzi.

Jest to długi akapit napisany, aby pokazać, w jaki sposób nasze narzędzia wpływają na wysokość linii elementu. Klasy są stosowane do samego elementu lub czasami do elementu nadrzędnego. Klasy te można dostosować do potrzeb za pomocą naszego narzędzia 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>

Monoprzestrzeń

Zmień zaznaczenie na nasz stos czcionek o stałej szerokości za pomocą .font-monospace.

To jest w monoprzestrzeni

html

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

Zresetuj kolor

Zresetuj kolor tekstu lub łącza za pomocą .text-reset, aby odziedziczył kolor po swoim rodzicu.

Wyciszony tekst z linkiem do resetowania .

html

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

Dekoracja tekstu

Udekoruj tekst w komponentach za pomocą klas dekoracji tekstu.

Pod tym tekstem znajduje się linia.

Ten tekst ma linię przechodzącą przez niego.

Ten link ma usuniętą dekorację tekstową

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

Zmienne

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

Mapy

Na podstawie tej mapy generowane są narzędzia rozmiaru czcionki w połączeniu z naszym interfejsem API narzędzi.

$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
);

Narzędzia API

Narzędzia do obsługi czcionek i tekstu są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss. Dowiedz się, jak korzystać z interfejsu API narzędzi.

    "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
    ),