Testun

Dogfennaeth ac enghreifftiau ar gyfer cyfleustodau testun cyffredin i reoli aliniad, lapio, pwysau, a mwy.

Ar y dudalen hon

Aliniad testun

Ailalinio testun yn hawdd i gydrannau gyda dosbarthiadau alinio testun. Ar gyfer cychwyn, diwedd, ac aliniad canolfan, mae dosbarthiadau ymatebol ar gael sy'n defnyddio'r un torbwyntiau lled golygfa â'r system grid.

Cychwyn testun wedi'i alinio ar bob maint porth gwylio.

Testun wedi'i alinio yn y canol ar bob maint porth gwylio.

Testun wedi'i alinio i'r diwedd ar bob maint porth gwylio.

Cychwyn testun wedi'i alinio ar SM maint pyrth gwylio (bach) neu ehangach.

Dechreuwch destun wedi'i alinio ar borthladdoedd maint MD (canolig) neu'n ehangach.

Dechreuwch destun wedi'i alinio ar olygfannau maint LG (mawr) neu'n ehangach.

Dechreuwch destun wedi'i alinio ar borthladdoedd maint XL (eithr-fawr) neu ehangach.

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>

Sylwch nad ydym yn darparu dosbarthiadau cyfleustodau ar gyfer testun wedi'i gyfiawnhau. Er, yn esthetig, y gallai testun wedi'i gyfiawnhau edrych yn fwy apelgar, mae'n gwneud gofod geiriau yn fwy hap ac felly'n anoddach ei ddarllen.

Lapio testun a gorlif

Lapiwch destun gyda .text-wrapdosbarth.

Dylai'r testun hwn lapio.

html

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

Atal testun rhag lapio gyda .text-nowrapdosbarth.

Dylai'r testun hwn orlifo'r rhiant.

html

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

Toriad geiriau

Atal llinynnau hir o destun rhag torri cynllun eich cydrannau trwy ddefnyddio .text-breaki set word-wrap: break-worda word-break: break-word. Rydym yn defnyddio word-wrapyn lle'r mwyaf cyffredin overflow-wrapar gyfer cefnogaeth porwr ehangach, ac yn ychwanegu'r anghymeradwy word-break: break-worder mwyn osgoi problemau gyda chynwysyddion fflecs.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Sylwch nad yw torri geiriau yn bosibl mewn Arabeg , sef yr iaith RTL a ddefnyddir fwyaf. Felly .text-breakmae'n cael ei dynnu o'n CSS a luniwyd gan RTL.

Trawsnewid testun

Trawsnewid testun yn gydrannau gyda dosbarthiadau cyfalafu testun.

Testun mewn llythrennau bach.

Testun priflythrennau.

Testun CapiTaliZed.

html

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

Sylwch fel .text-capitalizedim ond newid llythyren gyntaf pob gair, gan adael achos unrhyw lythrennau eraill heb ei effeithio.

Maint y ffont

Newidiwch y font-sizetestun yn gyflym. Er bod ein dosbarthiadau pennawd (ee, .h1- .h6) yn berthnasol font-size, font-weight, a line-height, mae'r cyfleustodau hyn yn berthnasol font-size. Mae maint ar gyfer y cyfleustodau hyn yn cyfateb i elfennau pennawd HTML, felly wrth i'r nifer gynyddu, mae eu maint yn lleihau.

.fs-1 testun

.fs-2 testun

.fs-3 testun

.fs-4 testun

.fs-5 testun

.fs-6 testun

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>

Addaswch eich font-sizes sydd ar gael trwy addasu'r $font-sizesmap Sass.

Pwysau ffont ac italig

Newidiwch y testun font-weightyn gyflym font-stylegyda'r cyfleustodau hyn. font-stylemae cyfleustodau'n cael eu talfyrru .fst-*a'r font-weightcyfleustodau'n cael eu talfyrru fel .fw-*.

Testun trwm.

Testun pwysau mwy beiddgar (o'i gymharu â'r rhiant elfen).

Testun pwysau hanner trwm.

Testun pwysau arferol.

Testun pwysau ysgafn.

Testun pwysau ysgafnach (o'i gymharu â'r rhiant elfen).

Testun italig.

Testun gydag arddull ffont arferol

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>

Uchder y llinell

Newidiwch uchder y llinell gyda .lh-*chyfleustodau.

Mae hwn yn baragraff hir a ysgrifennwyd i ddangos sut mae uchder llinell elfen yn cael ei effeithio gan ein cyfleustodau. Cymhwysir dosbarthiadau i'r elfen ei hun neu weithiau'r elfen rhiant. Gellir addasu'r dosbarthiadau hyn yn ôl yr angen gyda'n API cyfleustodau.

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>

Monofod

Newidiwch ddetholiad i'n pentwr ffontiau monospace gyda .font-monospace.

Mae hyn mewn monospace

html

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

Ailosod lliw

Ailosod lliw testun neu ddolen gyda .text-reset, fel ei fod yn etifeddu'r lliw gan ei riant.

Testun wedi'i dewi gyda dolen ailosod .

html

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

Addurno testun

Addurnwch destun mewn cydrannau gyda dosbarthiadau addurno testun.

Mae gan y testun hwn linell oddi tano.

Mae gan y testun hwn linell yn mynd trwyddo.

Mae addurniad testun y ddolen hon wedi'i dileu

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

Newidynnau

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

Mapiau

Mae cyfleustodau maint ffont yn cael eu cynhyrchu o'r map hwn, ar y cyd â'n API cyfleustodau.

$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

Mae cyfleustodau ffont a thestun yn cael eu datgan yn ein API cyfleustodau yn scss/_utilities.scss. Dysgwch sut i ddefnyddio'r API cyfleustodau.

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