Текст

Зэрэгцүүлэх, боох, жин гэх мэтийг хянах нийтлэг текст хэрэгслийн баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Текстийн зэрэгцүүлэх

Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай. Эхлэл, төгсгөл, төвд зэрэгцүүлэхийн тулд сүлжээний системтэй ижил харах талбайн өргөний таслах цэгийг ашигладаг хариу үйлдэл үзүүлэх ангиуд байдаг.

Харах цонхны бүх хэмжээтэй зэрэгцүүлсэн текстийг эхлүүлнэ үү.

Бүх харах цонхны хэмжээн дээр төвд зэрэгцүүлсэн текст.

Бүх харах цонхны хэмжээн дээр зэрэгцүүлсэн текстийг дуусгах.

SM (жижиг) эсвэл илүү өргөн хэмжээтэй харах цонхон дээр зэрэгцүүлсэн текстийг эхлүүлнэ үү.

MD (дунд) эсвэл түүнээс дээш хэмжээтэй харагдах цонхон дээр зэрэгцүүлсэн текстийг эхлүүлнэ үү.

LG (том) эсвэл түүнээс дээш хэмжээтэй харах цонхон дээр зэрэгцүүлсэн текстийг эхлүүлнэ үү.

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-ээс хасагдсан.

Текст хувиргах

Текстийг том үсгээр бичих анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хувиргах.

Жижиг үсгээр бичсэн текст.

Том үсгээр бичсэн текст.

Том үсэгтэй текст.

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эсвэл текстийг хурдан өөрчлөх . utilities гэж товчилсон , utilities гэж товчилдог .font-stylefont-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>

Нэг орон зай

Сонголтыг манай monospace фонтын стек болгон өөрчил .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
);

Utilities API

Фонт болон текст хэрэглүүрийг манай хэрэглүүрүүдийн 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
    ),