ਟੈਕਸਟ
ਅਲਾਈਨਮੈਂਟ, ਰੈਪਿੰਗ, ਭਾਰ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਆਮ ਟੈਕਸਟ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਣ।
ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ
ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੀਲਾਈਨ ਕਰੋ।
ਅਭਿਲਾਸ਼ੀ ਡੇਡਿਸੇ ਸਕ੍ਰਿਪਸੀਸ ਆਈਡੀਕੇਟਰੁਰ. ਕ੍ਰਾਸ ਮੈਟਿਸ ਆਇਉਡੀਸ਼ੀਅਮ ਪਰਸ ਸਿਟ ਅਮੇਟ ਫਰਮੈਂਟਮ। ਡੋਨੇਕ ਸੇਡ ਓਡੀਓ ਓਪੇਰਾ, ਈਯੂ ਵੁਲਪੁਟੇਟ ਫੇਲਿਸ ਰੋਨਕਸ। Praetera iter est quasdam res quas ex communi. ਐਟ nos hinc posthac, sitientis piros Afros. ਪੇਟੀਅਰੰਟ ਯੂਟੀ ਸਿਬੀ ਕੌਂਸਿਲਿਅਮ ਟੋਟਿਅਸ ਗੈਲੀਏ ਇਨ ਡਾਇਮ certam indicere. ਕ੍ਰਾਸ ਮੈਟਿਸ ਆਇਉਡੀਸ਼ੀਅਮ ਪਰਸ ਸਿਟ ਅਮੇਟ ਫਰਮੈਂਟਮ।
ਖੱਬੇ, ਸੱਜੇ ਅਤੇ ਕੇਂਦਰ ਅਲਾਈਨਮੈਂਟ ਲਈ, ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਉਪਲਬਧ ਹਨ ਜੋ ਗਰਿੱਡ ਸਿਸਟਮ ਵਾਂਗ ਹੀ ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ।
ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਇਕਸਾਰ ਟੈਕਸਟ।
ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਕੇਂਦਰ ਵਿੱਚ ਇਕਸਾਰ ਟੈਕਸਟ।
ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਸੱਜਾ ਇਕਸਾਰ ਟੈਕਸਟ।
ਵਿਊਪੋਰਟ ਦੇ ਆਕਾਰ ਦੇ 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
ਇੱਕ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਟੈਕਸਟ ਸਜਾਵਟ ਨੂੰ ਹਟਾਓ .