Bootstrap Text (текст)

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

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

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

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

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

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

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

Запретить перенос текста можно классом .text-nowrap.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  Этот текст должен переполнять родительский.
</div>

Word break (разрыв слова)

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

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

Text transform

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

<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">CapiTaliZed текст.</p>

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

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

Быстро измените толщину (жирность) текста или выделите текст курсивом.

<p class="fw-bold">Жирный текст.</p>
<p class="fw-bolder">Более жирный текст (относительно родительского элемента).</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>

Line height

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

<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>

Monospace (моноширинный)

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

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

Сбросить цвет

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

<p class="text-muted">
  Скрытый текст с <a href="#" class="text-reset">ссылкой для сброса</a>.
</p>

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

Украшайте текст в компонентах классами оформления текста.

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