Text

Dokumentasyon at mga halimbawa para sa mga karaniwang text utilities para makontrol ang alignment, wrapping, weight, at higit pa.

Sa pahinang ito

Pag-align ng teksto

Madaling i-realign ang text sa mga bahagi na may mga klase ng text alignment. Para sa simula, pagtatapos, at center alignment, available ang mga tumutugong klase na gumagamit ng parehong mga breakpoint ng lapad ng viewport gaya ng grid system.

Simulan ang naka-align na text sa lahat ng laki ng viewport.

Naka-align sa gitna ang text sa lahat ng laki ng viewport.

Tapusin ang naka-align na text sa lahat ng laki ng viewport.

Simulan ang naka-align na text sa mga viewport na may sukat na SM (maliit) o mas malawak.

Simulan ang naka-align na text sa mga viewport na may sukat na MD (medium) o mas malawak.

Simulan ang naka-align na text sa mga viewport na may sukat na LG (malaki) o mas malawak.

Simulan ang naka-align na text sa mga viewport na may sukat na XL (sobrang laki) o mas malawak.

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>

Tandaan na hindi kami nagbibigay ng mga utility class para sa justified text. Bagama't, ang aesthetically, justified text ay maaaring magmukhang mas kaakit-akit, ginagawa nitong mas random ang pag-spacing ng salita at samakatuwid ay mas mahirap basahin.

Text wrapping at overflow

I-wrap ang teksto sa isang .text-wrapklase.

Dapat balot ang tekstong ito.

html

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

Pigilan ang text mula sa pagbalot sa isang .text-nowrapklase.

Ang tekstong ito ay dapat umapaw sa magulang.

html

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

Pagputol ng salita

Pigilan ang mahabang string ng text na masira ang layout ng iyong mga bahagi sa pamamagitan ng paggamit .text-breaksa set word-wrap: break-wordat word-break: break-word. Ginagamit namin word-wrapsa halip na ang mas karaniwan overflow-wrappara sa mas malawak na suporta sa browser, at idinaragdag namin ang hindi na ginagamit word-break: break-wordupang maiwasan ang mga isyu sa mga flex container.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Tandaan na hindi posible ang pagbasag ng mga salita sa Arabic , na siyang pinaka ginagamit na RTL na wika. Samakatuwid .text-breakay inalis mula sa aming RTL compiled CSS.

Pagbabago ng teksto

Ibahin ang anyo ng teksto sa mga bahagi na may mga klase ng text capitalization.

Maliit na titik ang teksto.

Malaking titik ang teksto.

CapiTaliZed na teksto.

html

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

Pansinin kung paano .text-capitalizelamang binabago ang unang titik ng bawat salita, na iniiwan ang kaso ng anumang iba pang mga titik na hindi maaapektuhan.

Laki ng font

Mabilis na baguhin ang font-sizeteksto. Habang ang aming mga heading class (hal., .h1– .h6) ay nalalapat font-size, font-weight, at line-height, ang mga utility na ito ay nalalapat lamangfont-size . Ang sukat para sa mga utility na ito ay tumutugma sa mga elemento ng heading ng HTML, kaya habang tumataas ang bilang, bumababa ang laki ng mga ito.

.fs-1 na teksto

.fs-2 text

.fs-3 text

.fs-4 na teksto

.fs-5 na teksto

.fs-6 na teksto

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>

I-customize ang iyong mga available font-sizena s sa pamamagitan ng pagbabago sa $font-sizesmapa ng Sass.

Timbang ng font at italics

Mabilis na baguhin ang font-weighto font-styleng text gamit ang mga utility na ito. font-styleang mga utility ay pinaikli bilang .fst-*at font-weightang mga utility ay dinaglat bilang .fw-*.

Makapal na sulat.

Mas matapang na bigat ng teksto (na may kaugnayan sa pangunahing elemento).

Semibold na timbang na teksto.

Normal na bigat ng text.

Banayad na text.

Mas magaan ang bigat ng text (na may kaugnayan sa parent na elemento).

Italic na teksto.

Tekstong may normal na istilo ng font

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>

Taas ng linya

Baguhin ang taas ng linya gamit ang mga .lh-*utility.

Ito ay isang mahabang talata na isinulat upang ipakita kung paano naaapektuhan ng aming mga utility ang taas ng linya ng isang elemento. Ang mga klase ay inilalapat sa mismong elemento o kung minsan sa parent na elemento. Maaaring i-customize ang mga klaseng ito kung kinakailangan gamit ang aming 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

Baguhin ang isang seleksyon sa aming monospace font stack na may .font-monospace.

Ito ay nasa monospace

html

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

I-reset ang kulay

I-reset ang isang text o kulay ng link gamit ang .text-reset, upang mamana nito ang kulay mula sa magulang nito.

Naka-mute na text na may link sa pag-reset .

html

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

Dekorasyon ng teksto

Palamutihan ang teksto sa mga bahagi na may mga klase ng dekorasyon ng teksto.

Ang tekstong ito ay may linya sa ilalim nito.

Ang tekstong ito ay may linyang dumadaan dito.

Inalis ng link na ito ang dekorasyong teksto nito

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

Mga variable

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

Mga mapa

Ang mga utility na may laki ng font ay nabuo mula sa mapang ito, kasama ng aming mga utility 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

Ang mga font at text utilities ay ipinahayag sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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
    ),