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.

Algún texto de marcador de posición para demostrar o aliñamento do texto xustificado. Farás o mesmo por min? É hora de enfrontarse á música xa non son a túa musa. Oín que é fermoso, sexa o xuíz e as miñas nenas votarán. Podo sentir un fénix dentro de min. O ceo está celoso do noso amor, os anxos choran dende arriba. Si, lévame á utopía.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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>