ጽሑፍ

አሰላለፍን፣ መጠቅለልን፣ ክብደትን እና ሌሎችንም ለመቆጣጠር ለጋራ የጽሑፍ መገልገያ ሰነዶች እና ምሳሌዎች።

የጽሑፍ አሰላለፍ

በቀላሉ ከጽሑፍ አሰላለፍ ክፍሎች ጋር ጽሁፍን ወደ ክፍሎች ያስተካክሉ።

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum። ዶኔክ ሴድ ኦዲዮ ኦፔራ፣ ኢዩ vulputate felis rhoncus። Praeterea iter est quasdam res quas ex communi። በ nos hinc posthac፣ sitientis piros አፍሮስ። ፔቲየሩንት uti ሲቢ ኮንሲልየም ቶቲየስ ጋሊያኢ በዳይም ሰርታም ኢንዲሴሬ። Cras mattis iudicium purus sit amet fermentum።

<p class="text-justify">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.</p>

ለግራ፣ ቀኝ እና መሃል አሰላለፍ ልክ እንደ ፍርግርግ ሲስተም ተመሳሳይ የእይታ ስፋት መግቻ ነጥቦችን የሚጠቀሙ ምላሽ ሰጪ ክፍሎች አሉ።

በሁሉም የመመልከቻ መጠኖች ላይ በግራ የተሰለፈ ጽሑፍ።

በሁሉም መመልከቻ መጠኖች ላይ መሃል የተሰለፈ ጽሑፍ።

በሁሉም የመመልከቻ መጠኖች ላይ በቀኝ የተሰለፈ ጽሑፍ።

በግራ የተሰለፈ ጽሑፍ በእይታ ቦታዎች SM (ትንሽ) ወይም ሰፊ።

በግራ የተሰለፈ ጽሑፍ በእይታ ቦታዎች ኤምዲ (መካከለኛ) ወይም ከዚያ በላይ የሆነ።

የ LG (ትልቅ) ወይም ሰፊ መጠን ባላቸው የእይታ ወደቦች ላይ በግራ የተሰለፈ ጽሑፍ።

በግራ የተሰለፈ ጽሑፍ በእይታ ቦታዎች XL መጠን (ተጨማሪ ትልቅ) ወይም ሰፊ።

<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>

የጽሑፍ መጠቅለያ እና ከመጠን በላይ መፍሰስ

ጽሑፍ ከክፍል ጋር ከመጠቅለል ይከለክላል .text-nowrap።

ይህ ጽሑፍ ወላጁን ማጥለቅለቅ አለበት።

<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

.text-truncateረዘም ላለ ይዘት ጽሑፉን በ ellipsis ለመቁረጥ ክፍል ማከል ይችላሉ ። ያስፈልገዋል display: inline-blockወይም display: block.

Praeterea iter est quasdam res quas ex communi።

<!-- 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>

የጽሑፍ ለውጥ

የጽሑፍ ካፒታላይዜሽን ክፍሎች ጋር ክፍሎች ውስጥ ጽሑፍ ቀይር.

ዝቅተኛ ጽሑፍ።

ከፍ ያለ ጽሑፍ።

CapiTaliZed ጽሑፍ።

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

የእያንዳንዱን ቃል የመጀመሪያ ፊደል ብቻ እንዴት እንደሚለውጥ ልብ ይበሉ text-capitalize፣ ይህም የሌሎችን ፊደሎች ጉዳይ ምንም ተጽዕኖ አያሳድርም።

የፊደል ክብደት እና ሰያፍ

የጽሑፍ ክብደትን (ድፍረትን) በፍጥነት ይለውጡ ወይም ጽሑፍን ሰያፍ ያድርጉ።

ደፋር ጽሑፍ።

መደበኛ የክብደት ጽሑፍ.

ቀላል ክብደት ያለው ጽሑፍ።

ሰያፍ ጽሑፍ።

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>