текст

Документація та приклади типових текстових утиліт для керування вирівнюванням, обтіканням, вагою тощо.

На цій сторінці

Вирівнювання тексту

Легко переставте текст до компонентів за допомогою класів вирівнювання тексту. Для вирівнювання початку, кінця та центру доступні адаптивні класи, які використовують ті самі точки розриву ширини вікна перегляду, що й система сітки.

Почніть вирівнювати текст на всіх розмірах вікна перегляду.

Вирівняний по центру текст на всіх розмірах вікна перегляду.

Кінцевий вирівняний текст на всіх розмірах вікна перегляду.

Почніть вирівнювати текст у вікнах перегляду розміром 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-wrapдля ширшої підтримки браузера та додаємо застарілий word-break: break-word, щоб уникнути проблем із контейнерами flex.

мммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммммм

html

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

Зауважте, що розривання слів неможливе в арабській мові , яка є найбільш використовуваною мовою правого тексту. Тому .text-breakвидаляється з нашого скомпільованого CSS RTL.

Перетворення тексту

Перетворення тексту в компонентах за допомогою класів використання великих літер тексту.

Текст у нижньому регістрі.

Текст у верхньому регістрі.

Текст з великої літери.

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>

Налаштуйте свої доступні font-sizes, змінивши $font-sizesкарту Sass.

Товщина шрифту та курсив

Швидко змінюйте 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 утиліт

Шрифт і текстові утиліти оголошені в нашому 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
    ),