Текст

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

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

Выравнивайте текст в соответствии с обновляющимся выравниванием компонентов с помощью классов выравнивания.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

<p class="text-left">Выровненный слева текст для всех размеров видовых экранов.</p>
<p class="text-center">Выровненный по центру текст для всех размеров видовых экранов.</p>
<p class="text-right">Выровненный справа текст во всех размерах видового экрана.</p>

<p class="text-sm-left">Выровненный слева текст для экрана размера SM (small) или более широкого.</p>
<p class="text-md-left">Выровненный слева текст для экрана размера MD (medium) или более широкого.</p>
<p class="text-lg-left">Выровненный слева текст для экрана размера LG (large) или более широкого.</p>
<p class="text-xl-left">Выровненный слева текст для экрана размера XL (extra-large) или более широкого.</p>

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

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

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

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

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  Этот текст должен выходить за текст родительского элемента.
</div>

Для более длинного контента вы можете добавить класс .text-truncate для усечения текста используя эллипсис, т.е. многоточие ("..."). Требует display: inline-block или display: block.

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Разрыв слов

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

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

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

Трансформируйте текст в компонентах с помощью классов заглавных букв.

<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">разноРеГиСТровый текст.</p>

Заметьте, что text-capitalize меняет лишь первую букву каждого слова, оставляя регистр других неизменным.

Толщина текста и курсив

Изменяйте толщину и курсивность текста.

<p class="font-weight-bold">Жирный текст.</p>
<p class="font-weight-bolder">Жирный текст (относительно родительского элемента).</p>
<p class="font-weight-normal">Нормальная толщина текста.</p>
<p class="font-weight-light">Легкий текст.</p>
<p class="font-weight-lighter">Легкий текст (относительно родительского элемента).</p>
<p class="font-italic">Курсивный текст.</p>

Моноширинный текст (ширина каждого символа одинакова)

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

<p class="text-monospace">Это моноширинный текст</p>

Сброс цветов

Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя. Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Текстовое оформление

Удалите текстовое оформление с помощью класса .text-decoration-none.

<a href="#" class="text-decoration-none">Non-underlined link</a>