Текст

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

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

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

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

Текст с выравниванием по левому краю для всех размеров области просмотра.

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

Текст с выравниванием по правому краю для всех размеров области просмотра.

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

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

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

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

html

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

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

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

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

Оберните текст классом .text-wrap.

Этот текст следует обернуть.

html

<div class="badge 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, чтобы избежать проблем с гибкими контейнерами.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

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

Трансформация текста

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

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

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

Заглавный текст.

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 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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-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
),