Tusitusi

Faʻamaumauga ma faʻataʻitaʻiga mo faʻaoga masani o tusitusiga e pulea ai le faʻaogaina, afifi, mamafa, ma isi mea.

I luga o lenei itulau

Fa'atonuga o tusitusiga

Fa'afaigofie ona toe fa'aoga tusitusiga i vaega fa'atasi ai ma vasega fa'aogaina o tusitusiga. Mo le amataga, fa'ai'uga, ma le fa'aoga tutotonu, o lo'o avanoa vasega tali mai e fa'aoga tutusa va'aiga va'aiga lautele ma le faiga fa'asologa.

Amata fa'aoga tusitusiga i lapo'a va'aiga uma.

Fa'aogatotonu tusitusiga i luga o le tele o va'aiga.

Fa'ai'u tusitusiga fa'aoga i le tele o va'aiga.

Amata fa'aoga tusitusiga i luga ole va'aiga lapopoa SM (la'i) pe lautele.

Amata fa'aoga tusitusiga i luga o va'aiga va'aiga MD (medium) pe lautele.

Amata fa'aoga tusitusiga ile va'aiga mata'i tele LG (tele) pe lautele.

Amata fa'aoga tusitusiga ile va'aiga tele XL (tele-tele) pe lautele.

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>

Manatua matou te le tuʻuina atu vasega aoga mo tusitusiga faʻamaonia. A'o foliga matagofie, o tusitusiga fa'amaonia e foliga mai e sili atu ona manaia, e fa'ateleina ai le va o upu ma faigata ai ona faitau.

O le afifiina o tusitusiga ma taumasuasua

Afifi tusitusiga ma se .text-wrapvasega.

E tatau ona afifi lenei tusitusiga.

html

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

Taofi tusitusiga mai le afifiina i se .text-nowrapvasega.

O lenei tusitusiga e tatau ona taumasuasua i matua.

html

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

Tutu upu

Taofi laina uumi o tusitusiga mai le talepeina o au vaega e ala i le faʻaogaina .text-breake seti word-wrap: break-wordma word-break: break-word. Matou te fa'aogaina word-wrapnai lo le mea e masani overflow-wrapai mo le lautele o le su'esu'ega lagolago, ma fa'aopoopo le fa'agata word-break: break-worde aloese ai mai fa'afitauli i koneteina fe'avea'i.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Manatua o le motusia o upu e le mafai i le gagana Arapi , o le gagana RTL sili ona faʻaaogaina. O lea .text-breakua aveesea mai le matou RTL tuufaatasia CSS.

Suiga tusitusiga

Suia tusitusiga i vaega ma vasega mataitusi tetele.

Tusi laiti.

Tusi tetele mataitusi.

Tusitala Fa'akomepiuta.

html

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

Matau pe faapefea .text-capitalizeona suia na o mataitusi muamua o upu taitasi, ae tuu ai le tulaga o isi mataitusi e le afaina.

Tele lautusi

Suia vave le font-sizeo tusitusiga. A'o fa'aoga a matou vasega fa'aulutala (fa'ata'ita'iga, .h1– .h6) font-size, font-weight, ma le , e na'o leline-height fa'aaogaina o nei mea aoga . O le si'itia mo nei mea aoga e fetaui ma elemene autu o le HTML, ina ia fa'atupula'ia le numera, fa'aitiitia le lapo'a.font-size

.fs-1 tusitusiga

.fs-2 tusitusiga

.fs-3 tusitusiga

.fs-4 tusitusiga

.fs-5 tusitusiga

.fs-6 tusitusiga

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>

Fa'asinomaga au font-sizes avanoa e ala i le suia o le $font-sizesfaafanua Sass.

mamafa mataitusi ma faatusilima

Suia vave le font-weightpo font-styleo le tusitusiga i nei mea aoga. font-stylefa'apu'upu'u 'aufaigaluega ma fa'apu'upu'u .fst-*' font-weightaufaipisinisi ile .fw-*.

Tusi tetele.

Fa'amatalaga mamafa mamafa (fa'atatau i le elemene matua).

Fa'amaufa'ailoga mata'utia tusitusiga.

Fa'amatalaga mamafa masani.

Mau mama tusitusiga.

Fa'amatalaga mama mama (fa'atatau i le elemene matua).

Tusitusi fa'amau.

Tusi e iai le faiga masani

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>

Ole maualuga ole laina

Suia le maualuga o le laina i .lh-*mea aoga.

Ole parakalafa umi lea ua tusia e fa'aalia ai pe fa'afefea ona a'afia le laina-maualuga o se elemene e a tatou mea aoga. O vasega e faʻaoga i le elemene lava ia poʻo nisi taimi o le elemene matua. O nei vasega e mafai ona fa'avasegaina pe a mana'omia ma la matou aoga 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

Suia se filifiliga i le matou monospace font stack ma .font-monospace.

Ole mea lea ile monospace

html

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

Toe seti le lanu

Toe seti se tusitusiga po'o le lanu o feso'ota'iga i le .text-reset, ina ia maua ai le lanu mai lona matua.

Fa'alogoina tusitusiga ma se feso'ota'iga toe setiina .

html

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

Teuga tusitusiga

Teuteu tusitusiga i vaega ma vasega teuteu tusitusiga.

O lenei tusitusiga ei ai se laina i lalo ifo.

O lenei tusitusiga e iai se laina e ui atu ai.

O lenei so'oga ua aveese lona teuteuga o tusitusiga

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

Fuafuaga

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

Faafanua

E fa'atupu mai le fa'afanua lenei, fa'atasi ma a matou fa'aoga 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

O lo'o fa'ailoa mai le fa'aupuga ma fa'amatalaga i totonu o la matou fa'aoga API i scss/_utilities.scss. A'oa'o pe fa'afefea ona fa'aoga mea aoga 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
    ),