טֶקסט

תיעוד ודוגמאות עבור כלי עזר נפוצים לטקסט לשליטה ביישור, גלישה, משקל ועוד.

בעמוד זה

יישור טקסט

יישר מחדש בקלות טקסט לרכיבים עם מחלקות יישור טקסט. ליישור התחלה, סוף ומרכז, זמינות מחלקות רספונסיביות המשתמשות באותן נקודות עצירה ברוחב של שדה התצוגה כמו מערכת הרשת.

התחל טקסט מיושר בכל גדלי התצוגה.

טקסט מיושר במרכז בכל גדלי יציאת התצוגה.

סיים טקסט מיושר בכל גדלי התצוגה.

התחל טקסט מיושר ביציאות תצוגה בגודל 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כדי למנוע בעיות עם מיכלי flex.

ממממממממממממממממממממממממממממממממממממממממממממממ

html

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

שים לב שלא ניתן לשבור מילים בערבית , שהיא שפת ה-RTL הנפוצה ביותר. לכן .text-breakהוא הוסר מה-CSS המורכב של RTL.

שינוי טקסט

הפוך טקסט ברכיבים עם מחלקות רישיות טקסט.

טקסט באותיות קטנות.

טקסט באותיות גדולות.

טקסט עם רישיות.

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-sizeעל ידי שינוי $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 של Utilities

כלי עזר של גופנים וטקסט מוצהרים בממשק ה-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
    ),