متن

دستاويزن ۽ مثالن لاءِ عام ٽيڪسٽ يوٽيلٽيز کي ڪنٽرول ڪرڻ، لفافي، وزن، ۽ وڌيڪ.

هن صفحي تي

متن جي ترتيب

آساني سان متن جي ترتيب واري ڪلاسن سان اجزاء کي متن کي ترتيب ڏيو. شروعات، پڇاڙي، ۽ مرڪز جي ترتيب لاءِ، جوابي ڪلاس موجود آهن جيڪي ساڳي ويوپورٽ چوٽي بريڪ پوائنٽس کي استعمال ڪن ٿا جيئن گرڊ سسٽم.

شروع ڪريو ترتيب ڏنل متن سڀني ويو پورٽ سائزن تي.

وچ ۾ ترتيب ڏنل متن سڀني viewport جي سائزن تي.

سڀني ويوپورٽ سائزن تي ختم ٿيل متن.

شروع ڪريو ترتيب ڏنل متن تي وييو پورٽ جي سائيز جي ايس ايم (ننڍو) يا وسيع.

شروع ڪريو ترتيب ڏنل متن تي viewports sized MD (وچين) يا وسيع.

وييو پورٽ جي سائيز LG (وڏي) يا وسيع تي ترتيب ڏنل متن شروع ڪريو.

شروع ڪريو ترتيب ڏنل متن تي viewports sized XL (اضافي-وڏي) يا وسيع.

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

نوٽ ڪريو ته اسان مناسب متن لاءِ يوٽيلٽي ڪلاس فراهم نٿا ڪريون. جڏهن ته، جمالياتي طور تي، صحيح متن شايد وڌيڪ دلڪش نظر اچن ٿا، اهو لفظ جي فاصلي کي وڌيڪ بي ترتيب بڻائي ٿو ۽ تنهنڪري پڙهڻ ڏکيو آهي.

ٽيڪسٽ ريپنگ ۽ اوور فلو

.text-wrapڪلاس سان متن لپي .

هن متن کي ڍڪڻ گهرجي.

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

ٽيڪسٽ کي .text-nowrapڪلاس سان لپائڻ کان روڪيو.

هي متن والدين کي اوور فلو ڪرڻ گهرجي.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

لفظ ٽوڙڻ

.text-breakسيٽ word-wrap: break-word۽ word-break: break-word. _ اسان وسيع برائوزر سپورٽ لاءِ word-wrapوڌيڪ عام بدران استعمال ڪريون ٿا، ۽ فليڪس ڪنٽينرز سان مسئلن کان بچڻ لاءِ ختم ٿيل شامل ڪريو.overflow-wrapword-break: break-word

ممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم مممم

html

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

نوٽ ڪريو ته لفظن کي ٽوڙڻ عربي ۾ ممڪن ناهي ، جيڪا سڀ کان وڌيڪ استعمال ٿيل RTL ٻولي آهي. تنهن ڪري .text-breakاسان جي RTL مرتب ڪيل CSS مان هٽايو ويو آهي.

متن جي تبديلي

ٽيڪسٽ ڪيپيٽلائيزيشن ڪلاسن سان حصن ۾ متن کي تبديل ڪريو.

ننڍو لکت.

مٿاهون متن.

CapiTaliZed متن.

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

نوٽ ڪريو ته ڪيئن .text-capitalizeصرف هر لفظ جي پهرين اکر کي تبديل ڪري ٿو، باقي ڪنهن به اکر جي صورت کي غير متاثر نه ڪيو وڃي.

فونٽ جي ماپ

جلدي font-sizeمتن کي تبديل ڪريو. جڏهن ته اسان جا هيڊنگ ڪلاس (مثال طور، .h1– .h6) لاڳو ٿين ٿا font-size، font-weight۽ line-height, اهي افاديت صرف لاڳو ٿين ٿيون font-size. انهن يوٽيلٽيز لاءِ ترتيب ڏيڻ HTML جي هيڊنگ عناصر سان ملندو آهي، تنهنڪري جيئن تعداد وڌندو آهي، انهن جي سائيز گهٽجي ويندي آهي.

.fs-1 متن

.fs-2 متن

.fs-3 متن

.fs-4 متن

.fs-5 متن

.fs-6 متن

html

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Sass نقشي font-sizeکي تبديل ڪندي پنھنجي دستياب کي ترتيب ڏيو.$font-sizes

فونٽ وزن ۽ اطالوي

font-weightانهن يوٽيلٽيز سان جلدي يا font-styleمتن کي تبديل ڪريو . font-styleافاديت کي مختصر ڪيو ويو آهي جيئن .fst-*۽ font-weightافاديت کي مختصر ڪيو ويو آهي جيئن .fw-*.

بولڊ ٽيڪسٽ.

وڌيڪ وزن وارو متن (والدين عنصر سان لاڳاپيل).

سيمبولڊ وزن وارو متن.

عام وزن متن.

گھٽ وزن جو متن.

ھلڪو وزن متن (والدين عنصر سان لاڳاپيل).

اطالوي متن.

عام فونٽ جي انداز سان متن

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

ليڪ جي اوچائي

يوٽيلٽيز سان ليڪ جي اوچائي تبديل ڪريو .lh-*.

ھي ھڪڙو ڊگھو پيراگراف آھي جيڪو ظاھر ڪرڻ لاءِ لکيو ويو آھي ته اسان جي يوٽيلٽيز پاران ڪنھن عنصر جي لڪير جي اوچائي ڪيئن متاثر ٿيندي آھي. ڪلاس پاڻ عنصر تي لاڳو ٿين ٿا يا ڪڏهن ڪڏهن والدين عنصر. اهي ڪلاس اسان جي يوٽيلٽي API سان ضرورت مطابق ترتيب ڏئي سگهجن ٿا.

html

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

مونو اسپيس

اسان جي مونو اسپيس فونٽ اسٽيڪ سان چونڊ کي تبديل ڪريو .font-monospace.

هي مونو اسپيس ۾ آهي

html

<p class="font-monospace">This is in monospace</p>

رنگ بحال ڪريو

ھڪڙي متن يا لنڪ جي رنگ سان ري سيٽ ڪريو .text-reset، جيئن اھو رنگ پنھنجي والدين کان ورثي ۾ ملي.

ريٽيڪل لنڪ سان خاموش متن .

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

متن جي آرائش

ٽيڪسٽ سجاڳي ڪلاس سان اجزاء ۾ متن کي سجايو.

هن متن جي هيٺان هڪ لڪير آهي.

ھن متن ۾ ھڪڙي لائن آھي جنھن مان گذري رھيو آھي.

ھن لنڪ کي پنھنجي متن جي سجاوٽ کي ختم ڪيو ويو آھي

html

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

ساس

متغير

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

نقشا

اسان جي يوٽيلٽيز API سان ميلاپ ۾، فونٽ-سائيز يوٽيلٽيز هن نقشي مان ٺاهيا ويا آهن.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

يوٽيلٽيز API

scss/_utilities.scss. _ سکو ته ڪيئن استعمال ڪجي يوٽيلٽيز API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),