ጽሑፍ

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

የጽሑፍ አሰላለፍ

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

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-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ለማቀናበር overflow-wrap: break-word(እና word-break: break-wordለ IE እና Edge ተኳኋኝነት) በመጠቀም ረጅም የጽሑፍ ሕብረቁምፊዎች የእርስዎን ክፍሎች አቀማመጥ እንዳይሰብሩ ይከላከሉ ።

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

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