Testo
Documentazione ed esempi per le comuni utilità di testo per controllare l'allineamento, il wrapping, il peso e altro ancora.
Allineamento del testo
Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.
Del testo segnaposto per dimostrare l'allineamento del testo giustificato. Farai lo stesso per me? È tempo di affrontare la musica Non sono più la tua musa ispiratrice. Ho sentito che è bellissimo, sii il giudice e le mie ragazze voteranno. Sento una fenice dentro di me. Il paradiso è geloso del nostro amore, gli angeli piangono dall'alto. Sì, mi porti all'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 l'allineamento a sinistra, a destra e al centro, sono disponibili classi reattive che utilizzano gli stessi punti di interruzione della larghezza della finestra del sistema griglia.
Testo allineato a sinistra su tutte le dimensioni della finestra.
Testo allineato al centro su tutte le dimensioni della finestra.
Testo allineato a destra su tutte le dimensioni della finestra.
Testo allineato a sinistra su finestre di dimensioni SM (piccole) o più larghe.
Testo allineato a sinistra su finestre di dimensioni MD (medie) o più larghe.
Testo allineato a sinistra su finestre di dimensioni LG (grande) o più larghe.
Testo allineato a sinistra su finestre di dimensioni XL (extra-large) o più larghe.
<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>A capo automatico e overflow del testo
Avvolgi il testo con una .text-wrapclasse.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Impedisci al testo di andare a capo con una .text-nowrapclasse.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Per contenuti più lunghi, puoi aggiungere una .text-truncateclasse per troncare il testo con i puntini di sospensione. Richiede display: inline-blocko 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>Rottura di parole
Impedisci a lunghe stringhe di testo di interrompere il layout dei tuoi componenti utilizzando .text-breakper impostare word-wrap: break-worde word-break: break-word. Utilizziamo word-wrapinvece il più comune overflow-wrapper un supporto più ampio del browser e aggiungiamo il deprecato word-break: break-wordper evitare problemi con i contenitori flessibili.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Trasformazione del testo
Trasforma il testo in componenti con classi di capitalizzazione del testo.
Testo minuscolo.
Testo maiuscolo.
testo maiuscolo.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Nota come .text-capitalizecambia solo la prima lettera di ogni parola, lasciando inalterato il caso di tutte le altre lettere.
Peso del carattere e corsivo
Modifica rapidamente il peso (grassetto) del testo o metti in corsivo il testo.
Testo grassetto.
Testo in grassetto (relativo all'elemento padre).
Testo di peso normale.
Testo leggero.
Testo più leggero (rispetto all'elemento padre).
Testo in corsivo.
<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>Monospazio
Cambia una selezione nella nostra pila di caratteri a spaziatura fissa con .text-monospace.
Questo è nel monospazio
<p class="text-monospace">This is in monospace</p>Ripristina colore
Reimposta il colore di un testo o di un collegamento con .text-reset, in modo che erediti il colore dal suo genitore.
Testo disattivato con un collegamento di ripristino .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Decorazione del testo
Rimuovi una decorazione di testo con una .text-decoration-noneclasse.
<a href="#" class="text-decoration-none">Non-underlined link</a>