Текст
Выравнивание текста
Легко перенастройте текст для компонентов с помощью классов выравнивания текста. Для выравнивания по началу, концу и центру доступны адаптивные классы, использующие те же точки разрыва ширины экрана, что и система сетки.
<p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> <p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p> <p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
Перенос и переполнение текста
Перенос текста с помощью класса .text-wrap.
<div class="badge bg-primary text-wrap" style="width: 6rem;"> This text should wrap. </div>
Предотвращение переноса текста с помощью класса .text-nowrap.
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;"> This text should overflow the parent. </div>
Разрыв слова
Предотвращение разрыва длинных строк текста в компоновке компонентов с помощью .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>
.text-break удален из скомпилированного CSS для RTL.Преобразование текста
Преобразование текста в компонентах с классами преобразования регистра.
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, оставляя регистр всех других букв без изменений.
Размер шрифта
Быстро измените font-size текста. Хотя наши классы заголовков (например, .h1–.h6) применяют font-size, font-weight, и line-height, эти утилиты только применяют font-size. Масштабирование этих утилит соответствует элементам заголовков 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 путем изменения $font-sizes Sass карты.
Вес шрифта и курсив
Быстро измените font-weight или font-style текста с помощью этих утилит. font-style утилиты сокращаются как .fst-*, а font-weight утилиты сокращаются как .fw-*.
<p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-semibold">Semibold weight text.</p> <p class="fw-medium">Medium weight text.</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p>
Высота строки
Измените высоту строки с помощью .lh-* утилит.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Моноширинный шрифт
Измените выбор на наш моноширинный шрифт с помощью .font-monospace.
<p class="font-monospace">This is in monospace</p>
Сброс цвета
Сбросьте цвет текста или ссылки с помощью .text-reset, чтобы он наследовал цвет от своего родителя.
<p class="text-body-secondary"> Secondary body text with a <a href="#" class="text-reset">reset link</a>. </p>
Декорация текста
Декорируйте текст в компонентах с помощью классов декорации текста.
<p class="text-decoration-underline">This text has a line underneath it.</p> <p class="text-decoration-line-through">This text has a line going through it.</p> <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
CSS
Переменные Sass
Значения Sass по умолчанию, связанные с типом и шрифтом:
// 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 утилит.
$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 );
$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, );
API утилит Sass
Утилиты шрифтов и текста объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.
"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
),
© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/utilities/text/
