Texto

Documentación e exemplos de utilidades de texto comúns para controlar o aliñamento, o encaixe, o peso e moito máis.

Nesta páxina

Aliñación do texto

Realiñe facilmente o texto aos compoñentes con clases de aliñamento de texto. Para o aliñamento inicial, final e central, están dispoñibles clases de resposta que usan os mesmos puntos de interrupción de ancho da vista que o sistema de grade.

Comeza o texto aliñado en todos os tamaños de vistas.

Centrar o texto aliñado en todos os tamaños de vistas.

Finaliza o texto aliñado en todos os tamaños de vistas.

Inicia o texto aliñado en visores de tamaño SM (pequeno) ou máis anchos.

Inicia o texto aliñado en visores de tamaño MD (mediano) ou máis anchos.

Inicia o texto aliñado en visores de tamaño LG (grande) ou máis anchos.

Inicia o texto aliñado en visores de tamaño XL (extragrande) ou máis anchos.

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>

Teña en conta que non proporcionamos clases de utilidade para o texto xustificado. Aínda que, estéticamente, o texto xustificado pode parecer máis atractivo, fai que o espazo entre palabras sexa máis aleatorio e, polo tanto, sexa máis difícil de ler.

Axuste de texto e desbordamento

Envolver o texto cunha .text-wrapclase.

Este texto debería envolverse.

html

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

Evitar que o texto se axuste cunha .text-nowrapclase.

Este texto debería desbordar o pai.

html

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

Salto de palabras

Evita que as cadeas longas de texto rompan o deseño dos teus compoñentes usando .text-breakto set word-wrap: break-worde word-break: break-word. Usamos word-wrapen lugar do máis común overflow-wrappara unha compatibilidade máis ampla do navegador e engadimos o obsoleto word-break: break-wordpara evitar problemas cos contedores flexibles.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Teña en conta que non é posible romper palabras en árabe , que é a lingua RTL máis utilizada. Polo tanto .text-break, elimínase do noso CSS compilado en RTL.

Transformación de texto

Transformar texto en compoñentes con clases de maiúsculas de texto.

Texto en minúscula.

Texto en maiúscula.

html

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

Teña en conta como .text-capitalizesó cambia a primeira letra de cada palabra, deixando inalterado o caso de calquera outra letra.

Tamaño de letra

Cambia rapidamente o font-sizetexto. Mentres as nosas clases de título (por exemplo, .h1– .h6) se aplican font-size, font-weighte line-height, estas utilidades só se aplican font-size. O tamaño destas utilidades coincide cos elementos de título de HTML, polo que a medida que aumenta o número, o seu tamaño diminúe.

.fs-1 texto

Texto .fs-2

.fs-3 texto

.fs-4 texto

Texto .fs-5

Texto .fs-6

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>

Personaliza os teus dispoñibles font-sizemodificando o $font-sizesmapa Sass.

Peso da letra e cursiva

Cambia rapidamente o font-weightou font-styledo texto con estas utilidades. font-styleas utilidades abrevianse como .fst-*e as font-weightutilidades abrevianse como .fw-*.

Texto en negrita.

Texto máis groso (relativo ao elemento pai).

Texto de peso en seminegrita.

Texto de peso normal.

Texto lixeiro.

Texto máis lixeiro (relativo ao elemento principal).

Texto en cursiva.

Texto con estilo de letra normal

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>

Altura da liña

Cambia a altura da liña con .lh-*utilidades.

Este é un longo parágrafo escrito para mostrar como a altura da liña dun elemento se ve afectada polas nosas utilidades. As clases aplícanse ao propio elemento ou ás veces ao elemento pai. Estas clases pódense personalizar segundo sexa necesario coa nosa API de utilidade.

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>

Monoespacial

Cambia unha selección á nosa pila de fontes monoespazo con .font-monospace.

Isto é en monoespazo

html

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

Restablecer cor

Restablece a cor dun texto ou da ligazón con .text-reset, para que herde a cor do seu pai.

Texto silenciado cunha ligazón de restablecemento .

html

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

Decoración de texto

Decorar texto en compoñentes con clases de decoración de texto.

Este texto ten unha liña debaixo.

Este texto ten unha liña que pasa por el.

Esta ligazón eliminou a súa decoración de texto

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

Variables

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

Mapas

A partir deste mapa xéranse utilidades de tamaño de fonte, en combinación coa nosa API de utilidades.

$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 de utilidades

As utilidades de fonte e texto decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

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