Téacs

Doiciméadú agus samplaí d'fhóntais téacs coitianta chun ailíniú, beartú, meáchan agus go leor eile a rialú.

Ar an leathanach seo

Ailíniú téacs

Téacs a athailíniú go héasca le comhpháirteanna le ranganna ailínithe téacs. Ar mhaithe le ailíniú tosaigh, deiridh agus lárionad, tá ranganna sofhreagracha ar fáil a úsáideann na brisphointí céanna leithead an amhairc agus an córas eangaí.

Cuir tús le téacs ailínithe ar gach méid amhairc.

Téacs ailínithe lárnaigh ar gach méid amhairc.

Cuir deireadh le téacs ailínithe ar gach méid amhairc.

Cuir tús le téacs ailínithe ar amhairc SM (beag) nó níos leithne.

Cuir tús le téacs ailínithe ar phoirt amhairc MD (meánmhéide) nó níos leithne.

Cuir tús le téacs ailínithe ar amhairc ar mhéid LG (mór) nó níos leithne.

Cuir tús le téacs ailínithe ar phoirt amhairc ar mhéid XL (ró-mhór) nó níos leithne.

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>

Tabhair faoi deara nach gcuirimid ranganna fóntais ar fáil do théacs a bhfuil údar leis. Cé go bhféadfadh cuma níos tarraingtí a bheith ar théacs a bhfuil údar leis ó thaobh na haeistéitice de, déanann sé spásáil focal níos randamach agus mar sin níos deacra é a léamh.

Cumhdach téacs agus cur thar maoil

Wrap téacs le .text-wraprang.

Ba chóir go mbeadh an téacs seo fillte.

html

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

Cosc a chur ar théacs a fhilleadh le .text-nowraprang.

Ba cheart go gcuirfeadh an téacs seo thar maoil leis an tuismitheoir.

html

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

Briseadh focal

Cosc a chur ar shraitheanna fada téacs ó leagan amach do chomhpháirteanna a bhriseadh trí úsáid .text-breaka bhaint as leagan síos word-wrap: break-wordagus word-break: break-word. Bainimid úsáid word-wrapin ionad an ceann is coitianta overflow-wraple haghaidh tacaíochta brabhsálaí níos leithne, agus cuirimid an dímheasta word-break: break-wordchun saincheisteanna le coimeádáin flex a sheachaint.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Tabhair faoi deara nach féidir focail a bhriseadh san Araibis , an teanga RTL is mó a úsáidtear. Dá bhrí sin .text-breakbaintear é ónár CSS atá tiomsaithe ag RTL.

Téacs a athrú

Téacs a athrú ina chomhpháirteanna le ranganna caipitlithe téacs.

Téacs i gcás íochtair.

Téacs chás uachtair.

Téacs CapiTaliZed.

html

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

Tabhair faoi deara .text-capitalizenach n-athraíonn ach an chéad litir de gach focal, ag fágáil cás na litreacha eile gan tionchar.

Méid cló

font-sizeAthraigh an téacs go tapa . Cé go mbaineann ár ranganna ceannteidil (m.sh., .h1– .h6) font-size, font-weight, agus , ní bhaineann line-heightna fóntais seo achfont-size le . Tá méid na bhfóntas seo ag teacht le heilimintí ceannteidil HTML, agus mar sin de réir mar a mhéadaíonn an líon, laghdaítear a méid.

.fs-1 téacs

.fs-2 téacs

.fs-3 téacs

.fs-4 téacs

.fs-5 téacs

.fs-6 téacs

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>

Saincheap na s atá ar fáil agat trí léarscáil Sass font-sizea mhodhnú .$font-sizes

Meáchan cló agus iodálach

font-weightDéan an téacs nó an téacs a athrú go tapa font-styleleis na fóntais seo. font-styledéantar fóntais a ghiorrú mar .fst-*agus font-weightdéantar fóntais a ghiorrú mar .fw-*.

Téacs trom.

Téacs meáchain níos dána (i gcoibhneas leis an máthaireilimint).

Téacs meáchan semibold.

Téacs meáchan gnáth.

Téacs meáchan éadrom.

Téacs meáchan níos éadroime (i gcomparáid leis an máthaireilimint).

Téacs iodálach.

Téacs le gnáth-stíl cló

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>

Airde líne

Athraigh an airde líne le .lh-*fóntais.

Is alt fada é seo a scríobhtar chun a thaispeáint conas a théann ár bhfóntais i bhfeidhm ar airde líne dúile. Cuirtear ranganna i bhfeidhm ar an eilimint féin nó uaireanta ar an eilimint tuismitheora. Is féidir na ranganna seo a shaincheapadh de réir mar is gá lenár n-API fóntais.

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>

Monaspás

Athraigh rogha chuig ár gcruach clónna monaspáis le .font-monospace.

Tá sé seo i monaspás

html

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

Athshocraigh dath

Athshocraigh dath téacs nó nasc le .text-reset, ionas go bhfaighidh sé an dath le hoidhreacht óna thuismitheoir.

Téacs balbhaithe le nasc athshocraithe .

html

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

Maisiú téacs

Téacs a mhaisiú i gcomhpháirteanna le ranganna maisiúcháin téacs.

Tá líne thíos sa téacs seo.

Tá líne ag dul tríd an téacs seo.

Baintear maisiú téacs an nasc seo

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

Athróga

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

Léarscáileanna

Gintear fóntais clómhéid ón léarscáil seo, in éineacht lenár n-API fóntais.

$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

Déantar fóntais chló agus téacs a dhearbhú inár n-API fóntais i scss/_utilities.scss. Foghlaim conas an API fóntais a úsáid.

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