Տեքստ

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

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

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

Որոշ տեղապահի տեքստ՝ տեքստի արդարացված հավասարեցումը ցուցադրելու համար: Նույնը կանե՞ս ինձ համար։ Ժամանակն է առերեսվելու այն երաժշտությանը, որ ես այլևս քո մուսան չեմ: Լսել եմ, որ գեղեցիկ է, դատավոր եղիր, իսկ աղջիկներս քվեարկեն: Ես կարող եմ զգալ փյունիկ իմ ներսում: Երկինքը նախանձում է մեր սիրուն, հրեշտակները լաց են լինում վերևից: Այո, դու ինձ տանում ես ուտոպիա:

<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-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սահմանել word-wrap: break-wordև word-break: break-word. Մենք օգտագործում ենք word-wrapավելի տարածվածի փոխարեն ավելի overflow-wrapլայն դիտարկիչի աջակցության համար և ավելացնում ենք հնացածը word-break: break-word՝ ճկուն բեռնարկղերի հետ կապված խնդիրներից խուսափելու համար:

մմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմմ

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