Text

Documentație și exemple pentru utilitare de text obișnuite pentru a controla alinierea, împachetarea, greutatea și multe altele.

Pe aceasta pagina

Alinierea textului

Realliniați cu ușurință textul la componente cu clase de aliniere a textului. Pentru alinierea la început, la sfârșit și la centru, sunt disponibile clase receptive care utilizează aceleași puncte de întrerupere pentru lățimea ferestrei de vizualizare ca și sistemul de grilă.

Începeți textul aliniat pe toate dimensiunile ferestrelor de vizualizare.

Centrare textul aliniat pe toate dimensiunile ferestrelor de vizualizare.

Terminați textul aliniat pe toate dimensiunile ferestrelor de vizualizare.

Începeți textul aliniat pe ferestrele de dimensiune SM (mic) sau mai late.

Începeți textul aliniat pe ferestrele de dimensiune MD (medie) sau mai largi.

Începeți textul aliniat pe ferestrele de dimensiune LG (mari) sau mai late.

Începeți textul aliniat pe ferestrele de dimensiune XL (extra-mari) sau mai largi.

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

Rețineți că nu oferim clase de utilitate pentru text justificat. Deși, din punct de vedere estetic, textul justificat ar putea părea mai atrăgător, face spațierea cuvintelor mai aleatorie și, prin urmare, mai greu de citit.

Împachetare și depășire a textului

Încheierea textului cu o .text-wrapclasă.

Acest text ar trebui să se încheie.

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

Preveniți încheierea textului cu o .text-nowrapclasă.

Acest text ar trebui să depășească părintele.

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

Pauza de cuvânt

Împiedicați șirurile lungi de text să rupă aspectul componentelor dvs. folosind .text-breakpentru a seta word-wrap: break-wordși word-break: break-word. Folosim word-wrapîn loc de cel mai obișnuit overflow-wrappentru un suport mai larg de browser și adăugăm cel depreciat word-break: break-wordpentru a evita problemele cu containerele flexibile.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Rețineți că ruperea cuvintelor nu este posibilă în arabă , care este cel mai folosit limbaj RTL. Prin urmare .text-break, este eliminat din CSS-ul nostru RTL compilat.

Transformarea textului

Transformați textul în componente cu clase de scriere cu majuscule.

Text cu litere mici.

Text cu majuscule.

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

Observați cum .text-capitalizese schimbă doar prima literă a fiecărui cuvânt, lăsând neafectat litera majusculei altor litere.

Marimea fontului

Schimbați rapid font-sizetextul. În timp ce clasele noastre de antet (de exemplu, .h1– .h6) se aplică font-size, font-weightși line-height, aceste utilități se aplică numaifont-size . Dimensiunea pentru aceste utilitare se potrivește cu elementele de antet HTML, astfel încât, pe măsură ce numărul crește, dimensiunea lor scade.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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

Personalizați-vă elementele disponibile font-sizemodificând $font-sizesharta Sass.

Greutatea fontului și caracterele cursive

Schimbați rapid font-weightsau font-stylede text cu aceste utilitare. font-styleutilitățile sunt prescurtate ca .fst-*și font-weightutilitățile sunt prescurtate ca .fw-*.

Text îngroșat.

Text cu greutate mai îngroșată (față de elementul părinte).

Text cu greutate normală.

Text cu greutate redusă.

Text mai ușor (față de elementul părinte).

Text italic.

Text cu stil de 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>

Inaltimea liniei

Modificați înălțimea liniei cu .lh-*utilități.

Acesta este un paragraf lung scris pentru a arăta modul în care înălțimea liniei unui element este afectată de utilitățile noastre. Clasele sunt aplicate elementului în sine sau uneori elementului părinte. Aceste clase pot fi personalizate după cum este necesar cu API-ul nostru utilitar.

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

Monospațiu

Schimbați o selecție în stiva noastră de fonturi monospace cu .font-monospace.

Acesta este în monospațiu

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

Resetează culoarea

Resetați culoarea unui text sau a unui link cu .text-reset, astfel încât să moștenească culoarea de la părintele său.

Text dezactivat cu un link de resetare .

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

Decorare text

Decorați textul în componente cu clase de decorare text.

Acest text are o linie sub el.

Acest text are o linie care trece prin el.

Acest link are decorul text eliminat

<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

Variabile

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

Hărți

Utilitarele pentru dimensiunea fontului sunt generate de pe această hartă, în combinație cu API-ul nostru de utilitare.

$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

Utilitarele de font și text sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

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