Text
Dokumentasyon at mga halimbawa para sa mga karaniwang text utilities para makontrol ang alignment, wrapping, weight, at higit pa.
Pag-align ng teksto
Madaling i-realign ang text sa mga bahagi na may mga klase ng text alignment.
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.
Para sa kaliwa, kanan, at center alignment, available ang mga tumutugong klase na gumagamit ng parehong mga breakpoint ng lapad ng viewport gaya ng grid system.
Naka-align sa kaliwa ang text sa lahat ng laki ng viewport.
Naka-align sa gitna ang text sa lahat ng laki ng viewport.
Naka-align sa kanan na text sa lahat ng laki ng viewport.
Naka-align sa kaliwa ang text sa mga viewport na may sukat na SM (maliit) o mas malawak.
Naka-align sa kaliwa ang text sa mga viewport na may sukat na MD (medium) o mas malawak.
Naka-align sa kaliwa ang text sa mga viewport na may sukat na LG (malaki) o mas malawak.
Naka-align sa kaliwa ang text sa mga viewport na may sukat na XL (sobrang laki) o mas malawak.
Text wrapping at overflow
I-wrap ang teksto sa isang .text-wrap
klase.
Pigilan ang text mula sa pagbalot sa isang .text-nowrap
klase.
Para sa mas mahabang nilalaman, maaari kang magdagdag ng isang .text-truncate
klase upang putulin ang teksto gamit ang isang ellipsis. Nangangailangan display: inline-block
o display: block
.
Pagputol ng salita
Pigilan ang mahabang string ng text na masira ang layout ng iyong mga bahagi sa pamamagitan ng paggamit .text-break
sa set word-wrap: break-word
at word-break: break-word
. Ginagamit namin word-wrap
sa halip na ang mas karaniwan overflow-wrap
para sa mas malawak na suporta sa browser, at idinaragdag namin ang hindi na ginagamit word-break: break-word
upang maiwasan ang mga isyu sa mga flex container.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Pagbabago ng teksto
Ibahin ang anyo ng teksto sa mga bahagi na may mga klase ng text capitalization.
Maliit na titik ang teksto.
Malaking titik ang teksto.
CapiTaliZed na teksto.
Pansinin kung paano .text-capitalize
lamang binabago ang unang titik ng bawat salita, na iniiwan ang kaso ng anumang iba pang mga titik na hindi maaapektuhan.
Timbang ng font at italics
Mabilis na baguhin ang bigat (boldness) ng text o i-italicize ang text.
Makapal na sulat.
Mas matapang na bigat ng teksto (na may kaugnayan sa pangunahing elemento).
Normal na bigat ng text.
Banayad na text.
Mas magaan ang bigat ng text (na may kaugnayan sa parent na elemento).
Italic na teksto.
Monospace
Baguhin ang isang seleksyon sa aming monospace font stack na may .text-monospace
.
Ito ay nasa monospace
I-reset ang kulay
I-reset ang isang text o kulay ng link gamit ang .text-reset
, upang mamana nito ang kulay mula sa magulang nito.
Naka-mute na text na may link sa pag-reset .
Dekorasyon ng teksto
Mag-alis ng text decoration na may .text-decoration-none
klase.