Текст

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

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

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

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

Текст, выровненный по началу, на всех размерах области просмотра.

Текст, выровненный по центру, на всех размерах области просмотра.

Текст, выровненный по концу, на всех размерах области просмотра.

Текст, выровненный по концу, на областях просмотра размером SM (маленький) или шире.

Текст, выровненный по концу, на областях просмотра размером MD (средний) или шире.

Текст, выровненный по концу, на областях просмотра размером LG (большой) или шире.

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

Текст, выровненный по концу, на областях просмотра размером XXL (очень-очень большой) или шире.

html

<p class="text-start">Текст, выровненный по началу, на всех размерах области просмотра.</p>
<p class="text-center">Текст, выровненный по центру, на всех размерах области просмотра.</p>
<p class="text-end">Текст, выровненный по концу, на всех размерах области просмотра.</p>

<p class="text-sm-end">Текст, выровненный по концу, на областях просмотра размером SM (маленький) или шире.</p>
<p class="text-md-end">Текст, выровненный по концу, на областях просмотра размером MD (средний) или шире.</p>
<p class="text-lg-end">Текст, выровненный по концу, на областях просмотра размером LG (большой) или шире.</p>
<p class="text-xl-end">Текст, выровненный по концу, на областях просмотра размером XL (очень большой) или шире.</p>
<p class="text-xxl-end">Текст, выровненный по концу, на областях просмотра размером XXL (очень-очень большой) или шире.</p>

Обратите внимание, что мы не предоставляем классы утилит для выровненного по ширине текста. Хотя эстетически выровненный по ширине текст может выглядеть более привлекательным, он делает интервалы между словами более случайными и поэтому труднее читаемыми.

Перенос текста и переполнение

Переносите текст с помощью класса .text-wrap.

Этот текст должен переноситься.

html

<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
  Этот текст должен переноситься.
</div>

Предотвратите перенос текста с помощью класса .text-nowrap.

Этот текст должен переполнить родительский элемент.

html

<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
  Этот текст должен переполнить родительский элемент.
</div>

Разрыв слов

Предотвратите разрыв макета ваших компонентов длинными строками текста, используя .text-break для установки word-wrap: break-word и word-break: break-word. Мы используем word-wrap вместо более распространенного overflow-wrap для более широкой поддержки браузеров и добавляем устаревшее word-break: break-word, чтобы избежать проблем с flex-контейнерами.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

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

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

Преобразуйте текст в компонентах с помощью наших классов капитализации текста: text-lowercase, text-uppercase или text-capitalize.

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

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

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

html

<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">Текст с заглавными буквами.</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</p>
<p class="fs-2">Текст .fs-2</p>
<p class="fs-3">Текст .fs-3</p>
<p class="fs-4">Текст .fs-4</p>
<p class="fs-5">Текст .fs-5</p>
<p class="fs-6">Текст .fs-6</p>

Настройте доступные размеры font-size, изменяя Sass-карту $font-sizes.

Вес шрифта и курсив

Быстро измените font-weight или font-style текста с помощью этих утилит. Утилиты font-style сокращены как .fst-*, а утилиты font-weight сокращены как .fw-*.

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

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

Полужирный текст.

Средний вес текста.

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

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

Текст легче (относительно родительского элемента).

Курсивный текст.

Текст с нормальным стилем шрифта

html

<p class="fw-bold">Жирный текст.</p>
<p class="fw-bolder">Текст жирнее (относительно родительского элемента).</p>
<p class="fw-semibold">Полужирный текст.</p>
<p class="fw-medium">Средний вес текста.</p>
<p class="fw-normal">Текст нормального веса.</p>
<p class="fw-light">Легкий вес текста.</p>
<p class="fw-lighter">Текст легче (относительно родительского элемента).</p>
<p class="fst-italic">Курсивный текст.</p>
<p class="fst-normal">Текст с нормальным стилем шрифта</p>

Высота строки

Измените высоту строки с помощью утилит .lh-*.

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

html

<p class="lh-1">Это длинный абзац, написанный, чтобы показать, как высота строки элемента влияет на наши утилиты. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего API утилит.</p>
<p class="lh-sm">Это длинный абзац, написанный, чтобы показать, как высота строки элемента влияет на наши утилиты. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего API утилит.</p>
<p class="lh-base">Это длинный абзац, написанный, чтобы показать, как высота строки элемента влияет на наши утилиты. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего API утилит.</p>
<p class="lh-lg">Это длинный абзац, написанный, чтобы показать, как высота строки элемента влияет на наши утилиты. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего API утилит.</p>

Моноширинный шрифт

Измените выделение на наш стек моноширинного шрифта с помощью .font-monospace.

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

html

<p class="font-monospace">Это в моноширинном шрифте</p>

Сброс цвета

Сбросьте цвет текста или ссылки с помощью .text-reset, чтобы он наследовал цвет от родительского элемента.

Вторичный текст тела с ссылкой сброса.

html

<p class="text-body-secondary">
  Вторичный текст тела с <a href="#" class="text-reset">ссылкой сброса</a>.
</p>

Декорирование текста

Декорируйте текст в компонентах с помощью классов декорирования текста.

У этого текста есть линия под ним.

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

У этой ссылки удалено декорирование текста

html

<p class="text-decoration-underline">У этого текста есть линия под ним.</p>
<p class="text-decoration-line-through">У этого текста есть линия, проходящая через него.</p>
<a href="#" class="text-decoration-none">У этой ссылки удалено декорирование текста</a>

CSS

Sass-переменные

Переменные Sass по умолчанию, связанные с типом и шрифтом:

scss/_variables.scss

// 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-medium:          500;
$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;

Sass-карты

Утилиты размера шрифта генерируются из этой карты в сочетании с нашим API утилит.

scss/_variables.scss

$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
);

scss/_maps.scss

$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

Sass API утилит

Утилиты шрифта и текста объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"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: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    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
),