Перейти к основному содержанию Перейти к навигации по документам
in English

Текст

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

На этой странице

Выравнивание текста

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

Начать выровненный текст на всех размерах окна просмотра.

Выровненный по центру текст на всех размерах окна просмотра.

Выровненный по концу текст на всех размерах окна просмотра.

Начните выровненный текст на окнах просмотра размером SM (маленький) или шире.

Начните выровненный текст на окнах просмотра размером MD (средний) или шире.

Начинайте выравнивать текст на видовых экранах размером LG (большой) или шире.

Начните выровненный текст на окнах просмотра размером XL (очень большой) или шире.

<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классом.

Этот текст должен обернуться. 
<div class="badge bg-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-breakto set word-wrap: break-wordи word-break: break-word. Мы используем word-wrapвместо более распространенных overflow-wrapдля более широкой поддержки браузеров и добавляем устаревшие word-break: break-word, чтобы избежать проблем с гибкими контейнерами.

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

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Обратите внимание, что разбиение слов невозможно в арабском языке , который является наиболее часто используемым языком с письмом справа налево. Поэтому .text-breakон удален из нашего RTL-скомпилированного CSS.

Преобразование текста

Преобразование текста в компонентах с помощью классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

Текст с заглавными буквами.

<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 текст

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

Жирный текст.

Более жирный текст (относительно родительского элемента).

Текст нормального веса.

Легкий текст.

Облегченный текст (относительно родительского элемента).

Курсив.

Текст с обычным шрифтом

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

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

Это в моноширине

<p class="font-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>

Оформление текста

Украсьте текст в компонентах с помощью классов оформления текста.

Под этим текстом есть строка.

В этом тексте есть линия, проходящая через него.

У этой ссылки удалено текстовое оформление 
<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", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-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-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(--#{$variable-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,
        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
    ),