دەق

بەڵگەنامە و نموونە بۆ سوودمەندییە باوەکانی دەقی بۆ کۆنترۆڵکردنی ڕێکخستن، پێچان، کێش و زۆر شتی تر.

ڕێکخستنی دەق

بە ئاسانی دەقەکە ڕێکبخەرەوە بۆ پێکهاتەکان بە پۆلەکانی ڕێکخستنی دەق.

ئامبیسیۆنی دیسێس سکریپسیس ئیودیکاتێر. کراس ماتیس ئیودیسیۆم پوروس دانیشتنی ئەمێت فێرمەنتۆم. دۆنێک سێد ئۆدیۆ ئۆپێرا، eu vulputate felis rhoncus. پرێتێریا ئیتەر ئێست کواسدام ڕیس کواس ئێکس کۆمۆنی. لە nos hinc posthac، sitientis piros ئەفرۆس. Petierunt uti sibi concilium تۆتیۆس گالیا لە دایم سێرتام ئیندێسێرێ. کراس ماتیس ئیودیسیۆم پوروس دانیشتنی ئەمێت فێرمەنتۆم.

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

بۆ ڕێکخستنی چەپ، ڕاست و ناوەڕاست، پۆلە وەڵامدەرەوەکان بەردەستن کە هەمان خاڵەکانی شکاندنی پانایی دەرچەی بینین بەکاردەهێنن وەک سیستەمی تۆڕ.

دەقی چەپ ڕێکخراو لەسەر هەموو قەبارەکانی viewport.

دەقی ناوەندی ڕێکخراو لەسەر هەموو قەبارەکانی دەرچەی بینین.

دەقی ڕاست ڕێکخراو لەسەر هەموو قەبارەکانی viewport.

دەقی چەپ ڕێکخراو لەسەر دەروازەکانی بینین بە قەبارەی 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-blockیان display: block.

پرێتێریا ئیتەر ئێست کواسدام ڕیس کواس ئێکس کۆمۆنی.

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

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<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تەنها پیتی یەکەمی هەر وشەیەک دەگۆڕێت، کەیسی هەر پیتێکی تر بێ کاریگەری دەهێڵێتەوە.

کێشی فۆنت و ئیتاڵیک

بە خێرایی کێشی (boldness)ی دەقەکە بگۆڕە یان دەقەکە بە ئیتاڵیک بنووسە.

نووسراوی تۆخ.

دەقی کێشی قەڵەمتر (بە بەراورد بە توخمە باوکەکە).

دەقی کێشی ئاسایی.

دەقی کێشی سووک.

دەقی کێشی سووکتر (بە بەراورد بە توخمە باوکەکە).

دەقی ئیتاڵی.

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