Téks

Dokuméntasi sareng conto pikeun utilitas téks umum pikeun ngatur alignment, bungkus, beurat, sareng seueur deui.

Dina kaca ieu

alignment téks

Gampang realign téks kana komponén sareng kelas alignment téks. Pikeun mimiti, tungtung, jeung alignment puseur, kelas responsif sadia nu make breakpoints lebar viewport sarua jeung sistem grid.

Mimitian téks dijajarkeun dina sadaya ukuran viewport.

Téks dijajarkeun tengah dina sadaya ukuran viewport.

Tungtung téks anu dijajarkeun dina sadaya ukuran viewport.

Mimitian téks dijajarkeun dina viewports ukuran SM (leutik) atawa leuwih lega.

Mimitian téks dijajarkeun dina viewports ukuran MD (sedeng) atawa leuwih lega.

Mimitian téks dijajarkeun dina viewports ukuran LG (badag) atawa leuwih lega.

Mimitian téks dijajarkeun dina viewports ukuran XL (ekstra-ageung) atawa leuwih lega.

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

Catet yén kami henteu nyayogikeun kelas utiliti pikeun téks anu dibenerkeun. Sanaos, sacara éstétis, téks anu dibenerkeun sigana langkung pikaresepeun, éta ngajantenkeun jarak-kecap langkung acak sareng janten langkung hese dibaca.

Bungkus téks sareng ngabahekeun

Bungkus téks sareng .text-wrapkelas.

téks ieu kedah dibungkus.

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

Nyegah téks tina bungkus sareng .text-nowrapkelas.

téks ieu kedah ngabahekeun indungna.

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

Pegat kecap

Nyegah string panjang téks ti megatkeun tata perenah komponén anjeun ku ngagunakeun .text-breakpikeun nyetél word-wrap: break-wordtur word-break: break-word. Kami nganggo word-wraptinimbang anu langkung umum overflow-wrappikeun pangrojong browser anu langkung lega, sareng tambahkeun anu dicabut word-break: break-wordpikeun ngahindarkeun masalah sareng wadah fleksibel.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Catet yén megatkeun kecap teu mungkin dina basa Arab , nu mangrupakeun basa RTL nu panglobana dipaké. Ku sabab .text-breaketa dipiceun tina RTL kami disusun CSS.

Transformasi téks

Transformasi téks dina komponén kalayan kelas kapitalisasi téks.

Aksara leutik.

Tulisan hurup ageung.

téks CapiTaliZed.

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

Catet kumaha .text-capitalizengan ukur ngarobih hurup kahiji unggal kecap, sareng ngantepkeun kasus hurup sanésna henteu kapangaruhan.

Ukuran font

Gancang ngarobah font-sizetéks. Samentara kelas judul urang (contona, .h1– .h6) lumaku font-size, font-weight, jeung line-height, Utiliti ieu ngan lumaku font-size. Ukuran pikeun utilitas ieu cocog sareng elemen judul HTML, janten nalika jumlahna ningkat, ukuranana ngirangan.

.fs-1 téks

.fs-2 téks

.fs-3 téks

.fs-4 téks

.fs-5 téks

.fs-6 téks

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

Sesuaikeun font-sizes anjeun sadia ku ngaropea $font-sizespeta Sass.

Beurat font sareng miring

Ganti gancang font-weightatanapi font-styletéks nganggo utilitas ieu. font-styleutilitas disingget .fst-*sareng font-weightutilitas disingget .fw-*.

téks kandel.

Téks beurat kandel (relatif ka unsur indungna).

téks beurat normal.

téks ringan.

Téks beurat torek (relatif ka unsur indungna).

Téks miring.

Téks nganggo gaya font normal

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

Jangkungna garis

Ngarobah jangkungna garis kalawan .lh-*Utiliti.

Ieu mangrupikeun paragraf panjang anu ditulis pikeun nunjukkeun kumaha jangkungna garis tina unsur dipangaruhan ku utilitas urang. Kelas diterapkeun kana unsur sorangan atanapi kadang unsur indungna. Kelas ieu tiasa disaluyukeun upami diperyogikeun sareng API utilitas kami.

<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

Ganti pilihan kana tumpukan font monospace kami nganggo .font-monospace.

Ieu dina monospace

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

Reset warna

Reset téks atanapi warna link nganggo .text-reset, supados warnana warisan ti indungna.

Téks diredam kalayan tautan reset .

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

Hiasan téks

Ngahias téks dina komponén sareng kelas hiasan téks.

Teks ieu aya garis di handapeunana.

Téks ieu ngagaduhan garis anu ngalangkunganana.

Tumbu ieu hiasan téks na dihapus

<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

Variabel

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

Peta

Utiliti ukuran font dihasilkeun tina peta ieu, digabungkeun sareng API utilitas kami.

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

Utiliti API

Utiliti font sareng téks dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti 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
    ),