in English

텍스트

정렬, 줄 바꿈, 무게 등을 제어하는 일반적인 텍스트 유틸리티에 대한 문서 및 예제.

이 페이지에서

텍스트 정렬

텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다. 시작, 끝 및 중앙 정렬의 경우 그리드 시스템과 동일한 뷰포트 너비 중단점을 사용하는 반응형 클래스를 사용할 수 있습니다.

모든 뷰포트 크기에서 정렬된 텍스트를 시작합니다.

모든 뷰포트 크기에서 가운데 정렬된 텍스트.

모든 뷰포트 크기에서 정렬된 텍스트를 끝냅니다.

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-breakto set word-wrap: break-word및 를 사용하여 긴 텍스트 문자열이 구성 요소의 레이아웃을 깨뜨리는 것을 방지합니다 word-break: break-word. 더 넓은 브라우저 지원을 위해 word-wrap더 일반적인 대신 사용 하고 플렉스 컨테이너 문제를 피하기 위해 더 이상 사용되지 않는 것을 추가합니다.overflow-wrapword-break: break-word

ㅋㅋㅋㅋㅋㅋㅋㅋ

HTML

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

가장 많이 사용되는 RTL 언어인 아랍어에서는 단어 를 깨는 것이 불가능합니다 . 따라서 .text-breakRTL 컴파일된 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>

Sass 맵 font-size을 수정 하여 사용 가능한 s를 사용자 정의하십시오 .$font-sizes

글꼴 두께 및 기울임꼴

이 유틸리티를 사용하여 텍스트 font-weight또는 텍스트를 빠르게 변경하십시오 . 유틸리티는 로 축약 되고 유틸리티는 로 축약됩니다 .font-stylefont-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
    ),