ጽሑፍ

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

የጽሑፍ አሰላለፍ

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

የተረጋገጠ የጽሑፍ አሰላለፍ ለማሳየት አንዳንድ ቦታ ያዥ ጽሑፍ። አንተም ለእኔ ተመሳሳይ ነገር ታደርግልኛለህ? ሙዚቃውን ለመጋፈጥ ጊዜው አሁን ነው እኔ ሙዚየምህ አይደለሁም። ቆንጆ እንደሆነ ሰምተህ ዳኛ ሁን እና ሴት ልጆቼ ድምጽ ይሰጣሉ። በውስጤ ፊኒክስ ይሰማኛል። መንግሥተ ሰማያት በፍቅራችን ቀናች፣ መላእክት ከላይ እየጮኹ ነው። አዎ፣ ወደ ዩቶፒያ ወስደሽኛል።

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

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

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

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

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

በግራ የተሰለፈ ጽሑፍ በእይታ ቦታዎች 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-wrapከክፍል ጋር መጠቅለል።

ይህ ጽሑፍ መጠቅለል አለበት።

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

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

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

<div class="text-nowrap bd-highlight" 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>

የቃል መቋረጥ

.text-breakረጅም የጽሑፍ ሕብረቁምፊዎች ለማዘጋጀት word-wrap: break-wordእና በመጠቀም የእርስዎን ክፍሎች አቀማመጥ እንዳይሰብሩ ይከላከሉ word-break: break-word። ለሰፊ አሳሽ ድጋፍ word-wrapከተለመዱት ይልቅ እንጠቀማለን እና ከተለዋዋጭ መያዣዎች ጋር የተያያዙ ችግሮችን ለማስወገድ የተቋረጠውን እንጨምራለን ።overflow-wrapword-break: break-word

ሚሚምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምምመት

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

የጽሑፍ ለውጥ

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

ዝቅተኛ ጽሑፍ።

ከፍ ያለ ጽሑፍ።

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

ሞኖስፔስ

ምርጫን ወደ ሞኖስፔስ ቅርጸ-ቁምፊ ቁልል ቀይር .text-monospace።

ይህ በሞኖስፔስ ውስጥ ነው

<p class="text-monospace">This is in monospace</p>

ቀለም ዳግም አስጀምር

.text-resetቀለሙን ከወላጁ እንዲወርስ የጽሑፍ ወይም የአገናኝ ቀለምን ዳግም ያስጀምሩ ።

ድምጸ-ከል የተደረገ ጽሑፍ ከዳግም ማስጀመሪያ አገናኝ ጋር ።

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

የጽሑፍ ማስጌጥ

.text-decoration-noneከክፍል ጋር የጽሑፍ ማስጌጥን ያስወግዱ ።

ያልተሰመረ አገናኝ

<a href="#" class="text-decoration-none">Non-underlined link</a>