in English

Testo

Documentazione ed esempi per le comuni utilità di testo per controllare l'allineamento, il wrapping, il peso e altro ancora.

Su questa pagina

Allineamento del testo

Riallinea facilmente il testo ai componenti con le classi di allineamento del testo. Per l'allineamento iniziale, finale e centrale, sono disponibili classi reattive che utilizzano gli stessi punti di interruzione della larghezza della finestra del sistema griglia.

Inizia il testo allineato su tutte le dimensioni della finestra.

Testo allineato al centro su tutte le dimensioni della finestra.

Fine del testo allineato su tutte le dimensioni della finestra.

Inizia il testo allineato su finestre di dimensioni SM (piccole) o più larghe.

Inizia il testo allineato su finestre di dimensioni MD (medie) o più larghe.

Inizia il testo allineato su finestre di dimensioni LG (grande) o più larghe.

Inizia il testo allineato su finestre di dimensioni XL (extra-large) o più larghe.

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>

Nota che non forniamo classi di utilità per il testo giustificato. Mentre, esteticamente, il testo giustificato potrebbe sembrare più attraente, rende la spaziatura delle parole più casuale e quindi più difficile da leggere.

A capo automatico e overflow del testo

Avvolgi il testo con una .text-wrapclasse.

Questo testo dovrebbe andare a capo.

html

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

Impedisci al testo di andare a capo con una .text-nowrapclasse.

Questo testo dovrebbe traboccare dal genitore.

html

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

Rottura di parole

Impedisci a lunghe stringhe di testo di interrompere il layout dei tuoi componenti utilizzando .text-breakper impostare word-wrap: break-worde word-break: break-word. Utilizziamo word-wrapinvece il più comune overflow-wrapper un supporto più ampio del browser e aggiungiamo il deprecato word-break: break-wordper evitare problemi con i contenitori flessibili.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Tieni presente che non è possibile interrompere le parole in arabo , che è la lingua RTL più utilizzata. Pertanto .text-breakviene rimosso dal nostro CSS compilato RTL.

Trasformazione del testo

Trasforma il testo in componenti con classi di capitalizzazione del testo.

Testo minuscolo.

Testo maiuscolo.

testo maiuscolo.

html

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

Nota come .text-capitalizecambia solo la prima lettera di ogni parola, lasciando inalterato il caso di tutte le altre lettere.

Dimensione del font

Cambia rapidamente il font-sizetesto. Sebbene le nostre classi di intestazione (ad esempio, .h1– .h6) si applichino font-size, font-weighte line-height, queste utilità si applicano solofont-size . Il dimensionamento per queste utilità corrisponde agli elementi di intestazione dell'HTML, quindi all'aumentare del numero, la loro dimensione diminuisce.

.fs-1 testo

.fs-2 testo

.fs-3 testo

.fs-4 testo

.fs-5 testo

.fs-6 testo

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>

Personalizza le tue disponibilità font-sizemodificando la $font-sizesmappa del Sass.

Peso del carattere e corsivo

Cambia rapidamente l' font-weighto font-styledel testo con queste utilità. font-stylele utilità sono abbreviate in .fst-*e le font-weightutilità sono abbreviate in .fw-*.

Testo grassetto.

Testo in grassetto (relativo all'elemento padre).

Testo in semigrassetto.

Testo di peso normale.

Testo leggero.

Testo più leggero (rispetto all'elemento padre).

Testo in corsivo.

Testo con stile di carattere normale

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>

Altezza della linea

Modifica l'altezza della linea con .lh-*le utilità.

Questo è un lungo paragrafo scritto per mostrare come l'altezza della linea di un elemento è influenzata dalle nostre utilità. Le classi vengono applicate all'elemento stesso o talvolta all'elemento padre. Queste classi possono essere personalizzate secondo necessità con la nostra 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>

Monospazio

Cambia una selezione nella nostra pila di caratteri a spaziatura fissa con .font-monospace.

Questo è nel monospazio

html

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

Ripristina colore

Reimposta il colore di un testo o di un collegamento con .text-reset, in modo che erediti il colore dal suo genitore.

Testo disattivato con un collegamento di ripristino .

html

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

Decorazione del testo

Decora il testo nei componenti con le classi di decorazione del testo.

Questo testo ha una riga sotto di esso.

Questo testo ha una riga che lo attraversa.

A questo collegamento è stata rimossa la decorazione del testo

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

Variabili

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

Mappe

Le utilità per la dimensione dei caratteri vengono generate da questa mappa, in combinazione con la nostra API delle utilità.

$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 di utilità

Le utilità di caratteri e testo sono dichiarate nella nostra API di utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

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