ጽሑፍ

ንኣሰላልፋ፣ ምጥቕላል፣ ክብደትን ካልእን ንምቁጽጻር ዝሕግዙ ናይ ልሙዳት ናይ ጽሑፍ ውጽኢታት ሰነዳትን ኣብነታትን።

ጽሑፍ ኣሰላልፋ

ጽሑፍ ብቐሊሉ ናብ ኣካላት ምስ ናይ ጽሑፍ ኣሰላልፋ ክፍልታት ዳግማይ ኣመዓራርዮ።

ገለ ቦታ ዝሓዘ ጽሑፍ ምኽኑይ ዝኾነ ኣሰላልፋ ጽሑፍ ንምግላጽ። ንስኻኸ ከምኡ ክትገብረለይ ዲኻ፧ ድሕሪ ደጊም ሙዝካ ኣይኮንኩን ዝብል ሙዚቃ ክትገጥሞ ግዜኡ እዩ። ሰሚዐ ጽብቕቲ እያ ዳኛ ኩን ኣዋልደይ ድማ ድምጺ ክወስዳ እየን። ኣብ ውሽጠይ ፊኒክስ ይስምዓኒ ኣሎ። ሰማይ ብፍቕርና ይቐንእ፡ መላእኽቲ ካብ ላዕሊ ይበኽዩ ኣለዉ። እወ ናብ ዩቶፕያ ትወስደኒ።

<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 (ንእሽቶ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ብጸጋም ዝተሰለፈ ጽሑፍ።

ኣብ MD (ማእከላይ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ብጸጋም ዝተሰለፈ ጽሑፍ።

ኣብ 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ንነዊሕ ትሕዝቶ ፡ ነቲ ጽሑፍ ብኤሊፕሲስ ንምቑራጽ ክፍሊ ክትውስኽ ትኽእል ኢኻ ። ወይ ይጠልብ .display: inline-blockdisplay: block

Praeterea iter est ኳስዳም ረስ ኳስ ኤክስ ኮሙኒ.

<!-- 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-breakto set word-wrap: break-wordand word-break: break-word. word-wrapኣብ ክንዲ እቲ ዝያዳ ዝውቱር overflow-wrapንዝሰፍሐ ደገፍ መርበብ ሓበሬታ ንጥቀመሉ ፣ ከምኡ’ውን word-break: break-wordምስ ፍሌክስ መትሓዚታት ንዘጋጥም ጸገማት ንምክልኻል ነቲ ዘይተጠቕመ ንውስኸሉ።

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

ጽሑፍ ምቕያር

ጽሑፍ ኣብ ኣካላት ምስ ናይ ጽሑፍ ርእሰ-ጽሑፍ ክፍልታት ምቕያር።

ብንእሽቶ ፊደል ዘለዎ ጽሑፍ።

ዓቢ ፊደል ዘለዎ ጽሑፍ።

ካፒታላይዝድ ዝኾነ ጽሑፍ።

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