Chữ

Tài liệu và ví dụ cho các tiện ích văn bản phổ biến để kiểm soát căn chỉnh, bao bọc, trọng lượng và hơn thế nữa.

Trên trang này

Căn chỉnh văn bản

Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản. Đối với căn chỉnh đầu, cuối và căn giữa, các lớp đáp ứng có sẵn sử dụng các điểm ngắt độ rộng khung nhìn giống như hệ thống lưới.

Bắt đầu văn bản được căn chỉnh trên tất cả các kích thước cửa sổ xem.

Văn bản được căn giữa trên tất cả các kích thước cửa sổ xem.

Văn bản được căn chỉnh cuối trên tất cả các kích thước cửa sổ xem.

Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước SM (nhỏ) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước MD (trung bình) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên khung nhìn có kích thước LG (lớn) hoặc rộng hơn.

Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước XL (cực lớn) hoặc rộng hơn.

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>

Lưu ý rằng chúng tôi không cung cấp các lớp tiện ích cho văn bản hợp lý. Mặc dù về mặt thẩm mỹ, văn bản được căn chỉnh có thể trông hấp dẫn hơn, nhưng nó làm cho khoảng cách giữa các từ trở nên ngẫu nhiên hơn và do đó khó đọc hơn.

Gói văn bản và phần tràn

Gói văn bản bằng một .text-wraplớp.

Văn bản này nên kết thúc.

html

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

Ngăn văn bản gói bằng một .text-nowraplớp.

Văn bản này sẽ tràn phụ huynh.

html

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

Ngắt từ

Ngăn các chuỗi văn bản dài phá vỡ bố cục các thành phần của bạn bằng cách sử dụng .text-breakđể đặt word-wrap: break-wordvà word-break: break-word. Chúng tôi sử dụng word-wrapthay vì phổ biến overflow-wraphơn để hỗ trợ trình duyệt rộng hơn và thêm những thứ không dùng nữa word-break: break-wordđể tránh các vấn đề với vùng chứa linh hoạt.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html

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

Lưu ý rằng không thể ngắt từ bằng tiếng Ả Rập , đây là ngôn ngữ RTL được sử dụng nhiều nhất. Do đó .text-break, nó bị xóa khỏi CSS đã biên dịch RTL của chúng tôi.

Chuyển đổi văn bản

Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.

Chữ viết thường.

Văn bản viết hoa.

Văn bản CapiTaliZed.

html

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

Lưu ý cách .text-capitalizechỉ thay đổi chữ cái đầu tiên của mỗi từ, để lại trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởng.

Cỡ chữ

Nhanh chóng thay đổi font-sizevăn bản. Trong khi các lớp tiêu đề của chúng tôi (ví dụ, .h1- .h6) áp dụng font-size, font-weightvà line-height, các tiện ích này chỉ áp dụng font-size. Định kích thước cho các tiện ích này khớp với các phần tử tiêu đề của HTML, vì vậy khi số lượng tăng lên, kích thước của chúng sẽ giảm.

.fs-1 văn bản

văn bản .fs-2

văn bản .fs-3

văn bản .fs-4

văn bản .fs-5

văn bản .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>

Tùy chỉnh các font-sizes có sẵn của bạn bằng cách sửa đổi $font-sizesbản đồ Sass.

Độ đậm và độ nghiêng của phông chữ

Nhanh chóng thay đổi font-weighthoặc font-stylecủa văn bản với các tiện ích này. font-styletiện ích được viết tắt là .fst-*và font-weightcác tiện ích được viết tắt là .fw-*.

Chữ in đậm.

Văn bản đậm hơn (liên quan đến phần tử mẹ).

Văn bản trọng số bán nguyệt.

Văn bản trọng lượng bình thường.

Văn bản có trọng lượng nhẹ.

Văn bản có trọng lượng nhẹ hơn (liên quan đến phần tử mẹ).

Văn bản in nghiêng.

Văn bản có kiểu phông chữ bình thường

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>

Chiều cao giữa các dòng

Thay đổi chiều cao dòng bằng .lh-*các tiện ích.

Đây là một đoạn văn dài được viết để chỉ ra chiều cao dòng của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử đó hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.

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

Thay đổi lựa chọn thành ngăn xếp phông chữ monospace của chúng tôi với .font-monospace.

Đây là trong monospace

html

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

Đặt lại màu

Đặt lại màu của văn bản hoặc liên kết với .text-reset, để nó kế thừa màu từ cha của nó.

Đã tắt tiếng văn bản có liên kết đặt lại .

html

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

Trang trí văn bản

Trang trí văn bản trong các thành phần với các lớp trang trí văn bản.

Văn bản này có một dòng bên dưới nó.

Văn bản này có một dòng đi qua nó.

Liên kết này đã bị xóa trang trí văn bản

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

Biến

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

Bản đồ

Các tiện ích kích thước phông chữ được tạo từ bản đồ này, kết hợp với API tiện ích của chúng tôi.

$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 tiện ích

Các tiện ích phông chữ và văn bản được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

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