Texto

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

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Alineación de texto

Realinea fácilmente el texto a los componentes con clases de alineación de texto. Para la alineación start, end, y center, hay clases responsive disponibles que utilizan los mismos puntos de interrupción del ancho del viewport que el sistema de cuadrícula.

Comienza a alinear el texto en todos los tamaños de viewport.

Texto alineado al centro en todos los tamaños de viewport.

Texto alineado al final en todos los tamaños de viewport.

Texto alineado al final en viewports de tamaño SM (pequeño) o más ancho.

Texto alineado al final en viewports de tamaño MD (mediano) o más ancho.

Texto alineado al final en viewports de tamaño LG (grande) o más anchas.

Texto alineado al final en viewports de tamaño XL (extra grande) o más anchas.

Texto alineado al final en viewports de tamaño XXL (extra extra grande) o más anchas.

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-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>

Ten 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 espaciado entre palabras sea más aleatorio y, por lo tanto, más difícil de leer.

Ajuste y desbordamiento de texto

Ajustar texto con una clase .text-wrap.

Este texto debe ajustarse.

html

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

Evita que el texto se ajuste con una clase .text-nowrap.

Este texto debe desbordar al padre.

html

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

Salto de palabra

Evita que largas cadenas de texto rompan el diseño de tus componentes usando .text-break para configurar word-wrap: break-word y word-break: break-word. Usamos word-wrap en lugar del más común overflow-wrap para una mayor compatibilidad con el navegador, y agregamos el obsoleto word-break: break-word para evitar problemas con los contenedores flex.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Ten en cuenta que no es posible dividir palabras 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

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

Texto en minúsculas.

Texto en mayúsculas.

Texto capiTaliZado.

html

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

Observa cómo .text-capitalize solo cambia la primera letra de cada palabra, sin afectar el caso de cualquier otra letra.

Tamaño de fuente

Cambia rápidamente el font-size del texto. Mientras que nuestras clases de encabezado (por ejemplo, .h1–.h6) aplican font-size, font-weight, y line-height, estas utilidades solo aplican 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.

texto .fs-1

texto .fs-2

texto .fs-3

texto .fs-4

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 tus font-size disponibles modificando el mapa $font-sizes de Sass.

Peso de fuente y cursiva

Cambia rápidamente el font-weight o el font-style del texto con estas utilidades. Las utilidades font-style se abrevian como .fst-* y las utilidades font-weight se abrevian como .fw-*.

Texto en negrita.

Texto con peso en negrita (en relación con el elemento principal).

Texto de peso en seminegrita.

Texto de peso medio.

Texto de peso normal.

Texto liviano.

Texto más liviano (en relación con el elemento principal).

Texto en cursiva.

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

Alto de línea

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

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.

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>

Monospace

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

Esto es en monoespacio.

html

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

Restablecer color

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

Texto del cuerpo secundario con un enlace de restablecimiento.

html

<p class="text-body-secondary">
  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>

Decoración de texto

Decora 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

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>

CSS

Variables Sass

Tipo predeterminado y variables Sass relacionadas con la fuente:

scss/_variables.scss

// 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-medium:          500;
$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 de Sass

Las utilidades de tamaño de fuente se generan a partir de este mapa, en combinación con nuestra API de utilidades.

scss/_variables.scss

$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
);

scss/_maps.scss

$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

API de utilidades de Sass

Las utilidades de fuentes y texto se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss

"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: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    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
),