ጽሑፍ

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

ጽሑፍ ኣሰላልፋ

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

Ambitioni dedisse ስክሪፕሲስ ኢዩዲኬረተር. ክራስ ማቲስ ኢዩዲስየም ፑረስ ኮፍ ኣሜት ፈርመንተም። ዶነክ ሴድ ኦዲዮ ኦፔራ፡ ዩ ቩልፑተት ፌሊስ ሮንከስ. Praeterea iter est ኳስዳም ረስ ኳስ ኤክስ ኮሙኒ. ኣብ ኖስ ሂንክ ፖስታክ፡ ሲቲየንቲስ ፒሮስ ኣፍሮስ. ፔቲሩንት ኡቲ ሲቢ ኮንሲሊየም ቶቲየስ ጋልያ ኣብ ዳይም ሰርታም ኢንዲሰረ። ክራስ ማቲስ ኢዩዲስየም ፑረስ ኮፍ ኣሜት ፈርመንተም።

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

ኣብ 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-breakነዊሕ ሕብረ-ቃላት ጽሑፍ ንኣቀማምጣ ኣካላትካ ከይሰብሩ ምክልኻል overflow-wrap: break-word( word-break: break-wordን IE & Edge compatibility) ብምጥቃም።

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>