Texto

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

Aliñación do texto

Realiñe facilmente o texto aos compoñentes con clases de aliñamento de texto.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

Para o aliñamento á esquerda, á dereita e ao centro, hai dispoñibles clases de resposta que usan os mesmos puntos de interrupción de ancho da vista que o sistema de grade.

Texto aliñado á esquerda en todos os tamaños de vistas.

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

Texto aliñado á dereita en todos os tamaños de vistas.

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

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

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

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

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Axuste de texto e desbordamento

Envolver o texto cunha .text-wrapclase.

Este texto debería envolverse.

<div class="badge badge-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.

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

Para contido máis longo, podes engadir unha .text-truncateclase para truncar o texto cun punto suspensivo. Require display: inline-blockou display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

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

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

Transformación de texto

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

Texto en minúscula.

Texto en maiúscula.

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

Peso da letra e cursiva

Cambia rapidamente o peso (negriña) do texto ou pon o texto en cursiva.

Texto en negrita.

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

Texto de peso normal.

Texto lixeiro.

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

Texto en cursiva.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Monoespacial

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

Isto é en monoespazo

<p class="text-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 .

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

Decoración de texto

Eliminar unha decoración de texto cunha .text-decoration-noneclase.

Ligazón non subliñada

<a href="#" class="text-decoration-none">Non-underlined link</a>