Teks

Dokumentasi dan contoh untuk utilitas teks umum untuk mengontrol perataan, pembungkusan, bobot, dan lainnya.

Di halaman ini

Perataan teks

Sejajarkan kembali teks dengan mudah ke komponen dengan kelas perataan teks. Untuk perataan awal, akhir, dan tengah, tersedia kelas responsif yang menggunakan titik putus lebar area pandang yang sama dengan sistem kisi.

Mulai teks rata pada semua ukuran viewport.

Teks rata tengah pada semua ukuran viewport.

Akhiri teks rata pada semua ukuran viewport.

Mulai teks rata pada area pandang berukuran SM (kecil) atau lebih lebar.

Mulai teks rata pada area pandang berukuran MD (sedang) atau lebih lebar.

Mulai teks rata pada area pandang berukuran LG (besar) atau lebih lebar.

Mulai teks rata pada area pandang berukuran XL (ekstra besar) atau lebih lebar.

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>

Perhatikan bahwa kami tidak menyediakan kelas utilitas untuk teks yang dibenarkan. Sementara, secara estetis, teks yang dibenarkan mungkin terlihat lebih menarik, itu membuat spasi kata lebih acak dan karenanya lebih sulit untuk dibaca.

Pembungkus teks dan luapan

Bungkus teks dengan .text-wrapkelas.

Teks ini harus dibungkus.

html

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

Cegah teks agar tidak dibungkus dengan .text-nowrapkelas.

Teks ini harus melebihi induknya.

html

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

Istirahat kata

Cegah string teks yang panjang agar tidak merusak tata letak komponen Anda dengan menggunakan .text-breakto set word-wrap: break-worddan word-break: break-word. Kami menggunakan word-wrapalih-alih yang lebih umum overflow-wrapuntuk dukungan browser yang lebih luas, dan menambahkan yang tidak digunakan lagi word-break: break-worduntuk menghindari masalah dengan wadah fleksibel.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Perhatikan bahwa memecah kata tidak dimungkinkan dalam bahasa Arab , yang merupakan bahasa RTL yang paling banyak digunakan. Oleh karena .text-breakitu dihapus dari CSS terkompilasi RTL kami.

Transformasi teks

Transformasi teks dalam komponen dengan kelas kapitalisasi teks.

Teks dengan huruf kecil.

Teks dengan huruf besar.

Teks CapiTaliZed.

html

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

Perhatikan bagaimana .text-capitalizehanya mengubah huruf pertama dari setiap kata, membiarkan huruf besar dari huruf lain tidak terpengaruh.

Ukuran huruf

Cepat mengubah font-sizeteks. Sementara kelas heading kami (misalnya, .h1– .h6) berlaku font-size, font-weight, dan line-height, utilitas ini hanya berlaku font-size. Ukuran untuk utilitas ini cocok dengan elemen heading HTML, sehingga saat jumlahnya bertambah, ukurannya berkurang.

.fs-1 teks

.fs-2 teks

teks .fs-3

teks .fs-4

.fs-5 teks

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

Sesuaikan font-sizes yang tersedia dengan memodifikasi $font-sizespeta Sass.

Berat font dan miring

Ubah font-weightatau font-styleteks dengan cepat dengan utilitas ini. font-styleutilitas disingkat sebagai .fst-*dan font-weightutilitas disingkat .fw-*.

Teks tebal.

Teks dengan bobot lebih tebal (relatif terhadap elemen induk).

Teks berat setengah tebal.

Teks berat normal.

Teks ringan.

Teks dengan bobot lebih ringan (relatif terhadap elemen induk).

Teks miring.

Teks dengan gaya font normal

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>

Tinggi garis

Ubah ketinggian garis dengan .lh-*utilitas.

Ini adalah paragraf panjang yang ditulis untuk menunjukkan bagaimana tinggi garis suatu elemen dipengaruhi oleh utilitas kita. Kelas diterapkan pada elemen itu sendiri atau terkadang elemen induk. Kelas-kelas ini dapat dikustomisasi sesuai kebutuhan dengan API utilitas kami.

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

Ubah pilihan ke tumpukan font monospace kami dengan .font-monospace.

Ini di monospace

html

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

Setel ulang warna

Setel ulang teks atau warna tautan dengan .text-reset, sehingga mewarisi warna dari induknya.

Teks yang dibisukan dengan tautan setel ulang .

html

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

Dekorasi teks

Hiasi teks dalam komponen dengan kelas dekorasi teks.

Teks ini memiliki garis di bawahnya.

Teks ini memiliki garis yang melewatinya.

Tautan ini menghapus dekorasi teksnya

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>

Kelancangan

Variabel

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

Peta

Utilitas ukuran font dihasilkan dari peta ini, dikombinasikan dengan 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
);

API Utilitas

Utilitas font dan teks dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

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