Texto

Documentação e exemplos de utilitários de texto comuns para controlar alinhamento, quebra, peso e muito mais.

Nesta página

Alinhamento de texto

Realinhe facilmente o texto aos componentes com classes de alinhamento de texto. Para alinhamento inicial, final e central, estão disponíveis classes responsivas que usam os mesmos pontos de interrupção de largura da janela de visualização que o sistema de grade.

Inicie o texto alinhado em todos os tamanhos de viewport.

Centralize o texto alinhado em todos os tamanhos de viewport.

Finalize o texto alinhado em todos os tamanhos de viewport.

Inicie o texto alinhado em viewports de tamanho SM (pequeno) ou maior.

Inicie o texto alinhado em viewports de tamanho MD (médio) ou mais largo.

Inicie o texto alinhado em viewports de tamanho LG (grande) ou maior.

Inicie o texto alinhado em viewports de tamanho XL (extra-grande) ou mais largo.

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>

Observe que não fornecemos classes utilitárias para texto justificado. Embora, esteticamente, o texto justificado possa parecer mais atraente, ele torna o espaçamento de palavras mais aleatório e, portanto, mais difícil de ler.

Quebra de texto e estouro

Enrole o texto com uma .text-wrapclasse.

Este texto deve quebrar.

html

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

Impedir que o texto seja agrupado com uma .text-nowrapclasse.

Este texto deve transbordar o pai.

html

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

Quebra de palavras

Evite que longas strings de texto quebrem o layout de seus componentes usando .text-breakpara definir word-wrap: break-worde word-break: break-word. Usamos word-wrapem vez do mais comum overflow-wrappara suporte mais amplo ao navegador e adicionamos o obsoleto word-break: break-wordpara evitar problemas com contêineres flexíveis.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Observe que não é possível quebrar palavras em árabe , que é o idioma RTL mais usado. Portanto .text-break, é removido do nosso CSS compilado por RTL.

Transformação de texto

Transforme texto em componentes com classes de capitalização de texto.

Texto em minúsculas.

Texto em maiúsculas.

Texto capitulado.

html

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

Observe como .text-capitalizealtera apenas a primeira letra de cada palavra, deixando as maiúsculas e minúsculas de quaisquer outras letras inalteradas.

Tamanho da fonte

Altere rapidamente o font-sizetexto. Enquanto nossas classes de cabeçalho (por exemplo, .h1– .h6) aplicam -se a font-size, font-weight, e line-height, esses utilitários aplicam -se apenas afont-size . O dimensionamento desses utilitários corresponde aos elementos de cabeçalho do HTML, portanto, à medida que o número aumenta, seu tamanho diminui.

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>

Personalize seus font-sizes disponíveis modificando o $font-sizesmapa Sass.

Peso da fonte e itálico

Altere rapidamente o font-weightou font-styledo texto com esses utilitários. font-styleutilitários são abreviados como .fst-*e font-weightutilitários são abreviados como .fw-*.

Texto em negrito.

Texto em negrito (relativo ao elemento pai).

Texto de peso semi-negrito.

Texto de peso normal.

Texto leve.

Texto mais leve (relativo ao elemento pai).

Texto em itálico.

Texto com estilo de fonte 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 linha

Altere a altura da linha com .lh-*utilitários.

Este é um longo parágrafo escrito para mostrar como a altura da linha de um elemento é afetada por nossos utilitários. As classes são aplicadas ao próprio elemento ou, às vezes, ao elemento pai. Essas classes podem ser personalizadas conforme necessário com nossa API de utilitários.

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>

Monoespaço

Altere uma seleção para nossa pilha de fontes monoespaçadas com .font-monospace.

Isso é em monoespaço

html

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

Redefinir cor

Redefina a cor de um texto ou link com .text-reset, para que ele herde a cor de seu pai.

Texto silenciado com um link de redefinição .

html

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

Decoração de texto

Decore texto em componentes com classes de decoração de texto.

Este texto tem uma linha abaixo dele.

Este texto tem uma linha passando por ele.

Este link teve sua decoração de texto removida

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

Variáveis

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

Utilitários de tamanho de fonte são gerados a partir deste mapa, em combinação com nossa API de utilitários.

$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 utilitários

Os utilitários de fonte e texto são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

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