Texto

Documentación y ejemplos de utilidades de texto comunes para controlar la alineación, el ajuste, el peso y más.

En esta página

Alineación del texto

Realinee fácilmente el texto a los componentes con clases de alineación de texto. Para la alineación inicial, final y central, hay disponibles clases de respuesta que usan los mismos puntos de corte de ancho de ventana gráfica que el sistema de cuadrícula.

Comience el texto alineado en todos los tamaños de ventana gráfica.

Texto alineado al centro en todos los tamaños de ventana gráfica.

Texto alineado final en todos los tamaños de ventana gráfica.

Comience el texto alineado en ventanas de tamaño SM (pequeño) o más ancho.

Comience el texto alineado en ventanas de tamaño MD (mediano) o más anchas.

Comience el texto alineado en ventanas de tamaño LG (grande) o más anchas.

Comience el texto alineado en ventanas de tamaño XL (extra grande) o más anchas.

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

Tenga en cuenta que no proporcionamos clases de utilidad para texto justificado. Si bien, estéticamente, el texto justificado puede parecer más atractivo, hace que el espacio entre palabras sea más aleatorio y, por lo tanto, más difícil de leer.

Ajuste de texto y desbordamiento

Envuelva el texto con una .text-wrapclase.

Este texto debe ajustarse.

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

Evite que el texto se ajuste a una .text-nowrapclase.

Este texto debe desbordar al padre.

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

salto de palabra

Evite que largas cadenas de texto rompan el diseño de sus componentes usando .text-breakto set word-wrap: break-wordy word-break: break-word. Usamos word-wrapen lugar del más común overflow-wrappara una mayor compatibilidad con el navegador, y agregamos el obsoleto word-break: break-wordpara evitar problemas con los contenedores flexibles.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Tenga en cuenta que dividir palabras no es posible en árabe , que es el idioma RTL más utilizado. Por lo tanto .text-break, se elimina de nuestro CSS compilado RTL.

Transformación de texto

Transforme texto en componentes con clases de capitalización de texto.

Texto en minúsculas.

Texto en mayúsculas.

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

Tenga en cuenta que .text-capitalizesolo cambia la primera letra de cada palabra, dejando intactas las mayúsculas y minúsculas de cualquier otra letra.

Tamaño de fuente

Cambie rápidamente el font-sizedel texto. Si bien nuestras clases de encabezados (p. ej., .h1– .h6) se aplican a font-size, font-weighty line-height, estas utilidades solo se aplican a font-size. El tamaño de estas utilidades coincide con los elementos de encabezado de HTML, por lo que a medida que aumenta el número, su tamaño disminuye.

.fs-1 texto

texto .fs-2

Texto .fs-3

Texto .fs-4

Texto .fs-5

Texto .fs-6

<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 tus correos electrónicos disponibles font-sizemodificando el $font-sizesmapa de Sass.

Peso de fuente y cursiva

Cambie rápidamente el font-weighto font-styledel texto con estas utilidades. font-stylelas utilidades se abrevian como .fst-*y font-weightlas utilidades se abrevian como .fw-*.

Texto en negrita.

Texto de peso más negrita (en relación con el elemento principal).

Texto de peso normal.

Texto ligero.

Texto de peso más ligero (en relación con el elemento principal).

Texto en cursiva.

Texto con estilo de fuente 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>

Altura de la línea

Cambia la altura de la línea con las .lh-*utilidades.

Este es un párrafo largo escrito para mostrar cómo nuestras utilidades afectan la altura de línea de un elemento. Las clases se aplican al elemento mismo o, a veces, al elemento principal. Estas clases se pueden personalizar según sea necesario con nuestra API de utilidad.

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

monoespaciado

Cambie una selección a nuestra pila de fuentes monoespaciadas con .font-monospace.

Esto es en monoespacio

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

Restablecer color

Restablezca el color de un texto o enlace con .text-reset, para que herede el color de su padre.

Texto silenciado con un enlace de reinicio .

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

decoración de texto

Decore texto en componentes con clases de decoración de texto.

Este texto tiene una línea debajo.

Este texto tiene una línea que lo atraviesa.

Este enlace tiene su decoración de texto eliminada

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

Hablar con descaro a

Variables

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

mapas

Las utilidades de tamaño de fuente se generan a partir de este mapa, en combinación con nuestra 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

Las utilidades de fuentes y texto se declaran en nuestra API de utilidades en formato scss/_utilities.scss. Aprenda a usar la API de utilidades.

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