ટેક્સ્ટ
સંરેખણ, રેપિંગ, વજન અને વધુને નિયંત્રિત કરવા માટે સામાન્ય ટેક્સ્ટ ઉપયોગિતાઓ માટે દસ્તાવેજીકરણ અને ઉદાહરણો.
ટેક્સ્ટ સંરેખણ
ટેક્સ્ટ ગોઠવણી વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને સરળતાથી ફરીથી ગોઠવો.
મહત્વાકાંક્ષી ડેડિસે સ્ક્રિપ્સિસ આયુડીકેતુર. Cras mattis iudicium purus sit amet fermentum. ડોનેક સેડ ઓડિયો ઓપેરા, ઇયુ વલ્પુટેટ ફેલિસ રોનકસ. Praetera iter est quasdam res quas ex communi. એટ nos hinc posthac, sitientis piros Afros. પેટીરન્ટ યુટીઆઈ સિબી કોન્સિલિયમ ટોટિયસ ગેલીઆ ઈન ડાયમ સર્ટામ ઈન્ડિસરે. Cras mattis iudicium purus sit amet fermentum.
ડાબે, જમણે અને મધ્યમાં ગોઠવણી માટે, પ્રતિભાવશીલ વર્ગો ઉપલબ્ધ છે જે ગ્રીડ સિસ્ટમની જેમ સમાન વ્યુપોર્ટ પહોળાઈના બ્રેકપોઈન્ટનો ઉપયોગ કરે છે.
બધા વ્યુપોર્ટ કદ પર ડાબે સંરેખિત ટેક્સ્ટ.
બધા વ્યુપોર્ટ માપો પર મધ્યમાં સંરેખિત ટેક્સ્ટ.
બધા વ્યુપોર્ટ કદ પર જમણે સંરેખિત ટેક્સ્ટ.
વ્યુપોર્ટ સાઇઝના SM (નાના) અથવા પહોળા પર ડાબે સંરેખિત ટેક્સ્ટ.
વ્યુપોર્ટ્સ કદના MD (મધ્યમ) અથવા પહોળા પર ડાબે સંરેખિત ટેક્સ્ટ.
વ્યુપોર્ટ સાઇઝના LG (મોટા) અથવા પહોળા પર ડાબે સંરેખિત ટેક્સ્ટ.
વ્યૂપોર્ટ સાઇઝના XL (અતિરિક્ત-મોટા) અથવા પહોળા પર ડાબે સંરેખિત ટેક્સ્ટ.
ટેક્સ્ટ રેપિંગ અને ઓવરફ્લો
.text-wrap
વર્ગ સાથે ટેક્સ્ટ લપેટી .
ટેક્સ્ટને .text-nowrap
વર્ગ સાથે લપેટીને અટકાવો.
લાંબી સામગ્રી માટે, તમે .text-truncate
અંડાકાર સાથે ટેક્સ્ટને કાપવા માટે એક વર્ગ ઉમેરી શકો છો. જરૂરી છે display: inline-block
અથવા display: block
.
શબ્દ વિરામ
સેટ .text-break
કરવા માટે word-wrap: break-word
અને word-break: break-word
. અમે વ્યાપક બ્રાઉઝર સપોર્ટ માટે word-wrap
વધુ સામાન્યને બદલે ઉપયોગ કરીએ છીએ, અને ફ્લેક્સ કન્ટેનર સાથે સમસ્યાઓ ટાળવા overflow-wrap
માટે નાપસંદ ઉમેરો .word-break: break-word
મમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમમ
ટેક્સ્ટ ટ્રાન્સફોર્મ
ટેક્સ્ટ કેપિટલાઇઝેશન વર્ગો સાથે ઘટકોમાં ટેક્સ્ટને રૂપાંતરિત કરો.
લોઅરકેસ ટેક્સ્ટ.
અપરકેસ કરેલ ટેક્સ્ટ.
CapitaliZed ટેક્સ્ટ.
નોંધ કરો કે .text-capitalize
દરેક શબ્દના ફક્ત પ્રથમ અક્ષરને કેવી રીતે બદલાય છે, અન્ય કોઈપણ અક્ષરોના કેસને અપ્રભાવિત છોડીને.
ફોન્ટ વજન અને ત્રાંસા
ટેક્સ્ટનું વજન (બોલ્ડનેસ) ઝડપથી બદલો અથવા ટેક્સ્ટને ઇટાલિક કરો.
બોલ્ડ ટેક્સ્ટ.
બોલ્ડર વેઇટ ટેક્સ્ટ (પેરેંટ એલિમેન્ટને સંબંધિત).
સામાન્ય વજન ટેક્સ્ટ.
હળવા વજનનું લખાણ.
હળવા વજનની ટેક્સ્ટ (પેરેંટ એલિમેન્ટને સંબંધિત).
ઇટાલિક ટેક્સ્ટ.
મોનોસ્પેસ
સાથે અમારા મોનોસ્પેસ ફોન્ટ સ્ટેકમાં પસંદગી બદલો .text-monospace
.
આ મોનોસ્પેસમાં છે
રંગ રીસેટ કરો
ટેક્સ્ટ અથવા લિંકનો રંગ સાથે રીસેટ કરો .text-reset
, જેથી તે તેના પેરેન્ટ પાસેથી રંગ વારસામાં મેળવે.
રીસેટ લિંક સાથે મ્યૂટ કરેલ ટેક્સ્ટ .
ટેક્સ્ટ શણગાર
.text-decoration-none
વર્ગ સાથે ટેક્સ્ટ શણગાર દૂર કરો .