Տեքստ

Փաստաթղթեր և օրինակներ ընդհանուր տեքստային օգտակար ծրագրերի համար՝ վերահսկելու հավասարեցումը, փաթաթումը, քաշը և այլն:

Տեքստի հավասարեցում

Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:

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. Հետևյալ ժամանակաշրջանում, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. 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 (փոքր) կամ ավելի լայնությամբ դիտակետերի վրա:

Ձախ հավասարեցված տեքստ 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.

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-breakset-ը overflow-wrap: break-word(և word-break: break-wordIE & 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>