Текст

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

На тази страница

Подравняване на текст

Лесно преподравнявайте текст към компоненти с класове за подравняване на текст. За начално, крайно и централно подравняване са налични адаптивни класове, които използват същите точки на прекъсване на ширината на прозореца за изглед като мрежовата система.

Започнете подравнен текст на всички размери на прозорците.

Централно подравнен текст на всички размери на прозорците.

Край на подравнения текст на всички размери на прозорците.

Започнете подравнен текст върху прозорци с размер SM (малък) или по-широк.

Започнете подравнен текст върху прозорци с размер MD (среден) или по-широк.

Започнете подравнен текст върху прозорци с размер LG (голям) или по-широк.

Започнете подравнен текст върху прозорци с размер XL (изключително голям) или по-широк.

html

<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-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Обърнете внимание, че не предоставяме полезни класове за оправдан текст. Въпреки че естетически оправданият текст може да изглежда по-привлекателен, той прави разстоянието между думите по-произволно и следователно по-трудно за четене.

Обвиване на текст и преливане

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

Този текст трябва да се пренася.

html

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

Предотвратете обвиването на текст с .text-nowrapклас.

Този текст трябва да надвишава родителя.

html

<div class="text-nowrap bg-light 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, за да избегнем проблеми с гъвкавите контейнери.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Обърнете внимание, че разбиването на думи не е възможно на арабски , който е най-използваният RTL език. Следователно .text-breakсе премахва от нашия RTL компилиран CSS.

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

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

Текст с малки букви.

Текст с главни букви.

html

<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, така че с увеличаването на броя техният размер намалява.

.fs-1 текст

.fs-2 текст

.fs-3 текст

.fs-4 текст

.fs-5 текст

.fs-6 текст

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-sizes, като промените $font-sizesкартата на Sass.

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

Бързо променяйте font-weightили font-styleна текст с тези помощни програми. font-styleкомуналните услуги са съкратени като .fst-*и font-weightкомуналните услуги са съкратени като .fw-*.

Удебелен текст.

По-дебел текст (спрямо родителския елемент).

Получерен текст с тегло.

Текст с нормално тегло.

Лек текст.

По-лек текст (в сравнение с родителския елемент).

Текст в курсив.

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

html

<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-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-*помощни програми.

Това е дълъг абзац, написан, за да покаже как височината на реда на даден елемент се влияе от нашите помощни програми. Класовете се прилагат към самия елемент или понякога към родителския елемент. Тези класове могат да бъдат персонализирани според нуждите с нашия API за помощни програми.

html

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

Това е в монопространство

html

<p class="font-monospace">This is in monospace</p>

Нулиране на цвета

Нулирайте цвета на текст или връзка с .text-reset, така че да наследи цвета от своя родител.

Заглушен текст с връзка за нулиране .

html

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

Текстова декорация

Декорирайте текст в компоненти с класове за декориране на текст.

Този текст има ред под него.

През този текст минава един ред.

Текстът на тази връзка е премахнат

html

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

дързък

Променливи

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

Карти

Помощните програми за размера на шрифта се генерират от тази карта в комбинация с нашия 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
);

API за помощни програми

Помощните програми за шрифт и текст са декларирани в нашия 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: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        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
    ),