Text
Documentació i exemples d'utilitats de text habituals per controlar l'alineació, l'ajustament, el pes i molt més.
Alineació del text
Realineu fàcilment el text als components amb classes d'alineació de text.
Text de marcador de posició per demostrar l'alineació del text justificada. Fareu el mateix per mi? És hora d'enfrontar-se a la música, ja no sóc la teva musa. He sentit que és bonic, sigues el jutge i les meves noies votaran. Puc sentir un fènix dins meu. El cel està gelós del nostre amor, els àngels ploren des de dalt. Sí, em portes a la utopia.
<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>
Per a l'alineació a l'esquerra, a la dreta i al centre, hi ha classes responsives disponibles que utilitzen els mateixos punts de ruptura d'amplada de la finestra gràfica que el sistema de quadrícula.
Text alineat a l'esquerra en totes les mides de finestra gràfica.
Centreu el text alineat a totes les mides de la finestra gràfica.
Text alineat a la dreta en totes les mides de la finestra gràfica.
Text alineat a l'esquerra en finestres de mida SM (petites) o més amples.
Text alineat a l'esquerra en finestres de mida MD (mitjana) o més amples.
Text alineat a l'esquerra a les finestres de mida LG (grans) o més amples.
Text alineat a l'esquerra a les finestres de mida XL (extragrans) o més amples.
<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>
Embolcall i desbordament de text
Emboliqui el text amb una .text-wrap
classe.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Eviteu que el text s'embolica amb una .text-nowrap
classe.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Per a contingut més llarg, podeu afegir una .text-truncate
classe per truncar el text amb punts suspensius. Requereix display: inline-block
o display: block
.
<!-- 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>
Salt de paraula
Eviteu que les llargues cadenes de text trenquin el disseny dels vostres components utilitzant .text-break
per establir word-wrap: break-word
i word-break: break-word
. Utilitzem word-wrap
en comptes del més comú overflow-wrap
per a un suport més ampli del navegador i afegim el obsolet word-break: break-word
per evitar problemes amb els contenidors flexibles.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Transformació de text
Transformeu text en components amb classes de majúscules de text.
Text en minúscula.
Text en majúscula.
Text en majúscula.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Tingueu en compte com .text-capitalize
només canvia la primera lletra de cada paraula, deixant sense afectar les majúscules i minúscules de les altres lletres.
Pes de la lletra i cursiva
Canvieu ràpidament el pes (negreta) del text o poseu-lo en cursiva.
Text en negreta.
Text en negreta (relatiu a l'element pare).
Text de pes normal.
Text lleuger.
Text més lleuger (relatiu a l'element principal).
Text 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>
Monoespai
Canvieu una selecció a la nostra pila de tipus de lletra monoespai amb .text-monospace
.
Això és en monoespai
<p class="text-monospace">This is in monospace</p>
Restableix el color
Restableix el color d'un text o d'un enllaç amb .text-reset
, de manera que hereti el color del seu pare.
Text silenciat amb un enllaç de restabliment .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decoració de text
Eliminar una decoració de text amb una .text-decoration-none
classe.
<a href="#" class="text-decoration-none">Non-underlined link</a>