Szöveg

Dokumentáció és példák általános szöveges segédprogramokhoz az igazítás, a tördelés, a súly és egyebek szabályozásához.

Ezen az oldalon

Szöveg igazítás

Könnyen igazíthatja újra a szöveget az összetevőkhöz a szövegigazítási osztályokkal. A kezdő-, a vég- és a középső igazításhoz olyan érzékeny osztályok állnak rendelkezésre, amelyek ugyanazokat a nézetablak-szélesség-töréspontokat használják, mint a rácsrendszer.

Kezdje el az igazított szöveget minden nézetablakban.

Középre igazított szöveg minden nézetablakban.

Vége az igazított szövegnek minden nézetablakban.

Kezdje el az igazított szöveget SM (kicsi) vagy szélesebb méretű nézetablakokon.

Kezdje el az igazított szöveget MD (közepes) vagy szélesebb méretű nézetablakokon.

Kezdje el az igazított szöveget LG (nagy) vagy szélesebb méretű nézetablakban.

Kezdje az igazított szöveget XL (extra nagy) vagy szélesebb méretű nézetablakokon.

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>

Ne feledje, hogy nem biztosítunk segédprogramokat az igazított szöveghez. Bár esztétikailag az indokolt szöveg vonzóbbnak tűnhet, mégis véletlenszerűbbé teszi a szóközt, és ezért nehezebben olvashatóvá teszi.

Szöveg tördelése és túlcsordulása

Szöveg tördelése .text-wraposztállyal.

Ezt a szöveget be kell zárni.

html

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

A szöveg tördelésének megakadályozása egy .text-nowraposztállyal.

Ennek a szövegnek túl kell árasztania a szülőt.

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Szótörés

Megakadályozza, hogy a hosszú szövegláncok megtörjék az összetevők elrendezését a .text-breakbeállítás word-wrap: break-wordés a segítségével word-break: break-word. A szélesebb böngészőtámogatás érdekében word-wrapa gyakoribb helyett használjuk, és a rugalmas tárolókkal kapcsolatos problémák elkerülése érdekében overflow-wraphozzáadjuk az elavultat .word-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Vegye figyelembe, hogy a szavak törése nem lehetséges az arab nyelven , amely a leggyakrabban használt RTL nyelv. Ezért .text-breakeltávolítjuk az RTL által összeállított CSS-ből.

Szöveg átalakítás

Szöveg átalakítása komponensekké szöveges nagybetűs osztályokkal.

Kisbetűs szöveg.

Nagybetűs szöveg.

html

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

Jegyezze meg, hogyan .text-capitalizeváltoztatja csak meg az egyes szavak első betűjét, a többi betű kis- és nagybetűjét nem érinti.

Betűméret

Gyorsan módosítsa a font-sizeszöveget. Míg a címsorosztályaink (pl. .h1– .h6) font-size, font-weight, és , ezek a line-heightsegédprogramok csakfont-size . Ezeknek a segédprogramoknak a mérete megegyezik a HTML címsorelemeivel, így a szám növekedésével a méretük csökken.

.fs-1 szöveg

.fs-2 szöveg

.fs-3 szöveg

.fs-4 szöveg

.fs-5 szöveg

.fs-6 szöveg

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>

A Sass térkép font-sizemódosításával testreszabhatja az elérhető s-eket.$font-sizes

Betűsúly és dőlt betű

Ezekkel a segédprogramokkal gyorsan módosíthatja a font-weightvagy font-stylea szöveget. font-styleA segédprogramok rövidítése , az .fst-*utilities font-weightpedig .fw-*.

Félkövér szöveg.

Félkövérebb súlyú szöveg (a szülőelemhez képest).

Félkövér súlyú szöveg.

Normál súlyú szöveg.

Könnyű szöveg.

Könnyebb súlyú szöveg (a szülőelemhez képest).

Dőlt szöveg.

Szöveg normál betűstílussal

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>

Vonalmagasság

Módosítsa a vonal magasságát a .lh-*segédprogramokkal.

Ez egy hosszú bekezdés, amely bemutatja, hogyan befolyásolják egy elem vonalmagasságát a segédprogramjaink. Az osztályokat magára az elemre vagy néha a szülőelemre alkalmazzák. Ezek az osztályok szükség szerint testreszabhatók segédprogram API-nkkal.

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>

Monospace

Módosítson egy kijelölést egyszóközű betűkészletünkre a gombbal .font-monospace.

Ez egy térben van

html

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

Szín visszaállítása

Állítsa vissza a szöveg vagy hivatkozás színét a segítségével .text-reset, hogy az örökölje a színt a szülőjétől.

Elnémított szöveg visszaállítási hivatkozással .

html

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

Szöveges díszítés

Díszítse a szöveget az összetevőkben szövegdíszítési osztályokkal.

Ez a szöveg alatt van egy vonal.

Ebben a szövegben van egy sor.

Ennek a linknek a szöveges díszítése eltávolítva

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>

Sass

Változók

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

Térképek

A betűtípus méretű segédprogramok ebből a térképből jönnek létre, a segédprogramok API-jával kombinálva.

$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
);

Utilities API

A betűtípus- és szövegsegédprogramok a segédprogramok API-jában vannak deklarálva a következőben: scss/_utilities.scss. Ismerje meg a segédprogramok API használatát.

    "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
    ),