Текст

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

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

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

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

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

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</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;">
  This text should overflow the parent.
</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, чтобы избежать проблем с контейнерами flex.

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

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

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

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

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

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

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

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

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

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

Декорация текста

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

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