내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
// Text

정렬, 줄바꿈, 굵기 등을 제어하는 ​​일반적인 텍스트 유틸리티에 대한 문서 및 예제입니다.

텍스트 정렬

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

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized XXL (extra extra large) or wider.

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-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
정렬된 텍스트에 대한 유틸리티 클래스는 제공하지 않습니다. 미학적으로 정렬된 텍스트는 매력적으로 보일 수 있지만 단어 간격을 무작위로 만들기 떄문에 가독성이 저하됩니다.

텍스트 줄바꿈과 오버플로우

.text-wrap 클래스로 줄바꿈하세요.

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

Prevent text from wrapping with a .text-nowrap class.

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

단어 기준 줄바꿈

.text-break를 사용하여 word-wrap: break-wordword-break: break-word를 설정하여 긴 텍스트 문자열이 컴포넌트의 레이아웃을 깨뜨리는 것을 막을 수 있습니다. 더 광범위한 브라우저 지원을 위해 보다 일반적인 overflow-wrap 대신 word-wrap을 사용하고 flex 컨테이너 문제를 피하기 위해 더 이상 사용되지 않는 word-break: break-word를 추가합니다.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
가장 많이 사용되는 RTL 언어인 아랍어에서는 단어 기준 줄바꿈이 불가능하다는 점을 유의해주세요. 따라서 RTL 컴파일 CSS에서는 .text-break가 제거되었습니다.

텍스트 대소문자

텍스트 대소문자 클래스를 사용하여 컴포넌트의 텍스트를 변환하세요.

Lowercased text.

Uppercased text.

CapiTaliZed text.

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

.text-capitalize가 각 단어의 첫 글자만 변경하고 다른 글자의 대소문자는 영향을 받지 않는다는 점에 유의하세요.

글꼴 크기

텍스트의 ‘글꼴 크기’를 빠르게 변경하세요. 우리의 제목 클래스 (예: .h1.h6)는 font-size, font-weight, line-height를 적용하지만 이러한 유틸리티는 font-size만 적용합니다. 이러한 유틸리티의 크기는 HTML의 제목 요소와 일치하므로 숫자가 증가하면 크기가 줄어듭니다.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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 Sass 맵을 수정하여 사용 가능한 font-size를 사용자 정의하세요.

글꼴 굵기와 기울임체

이 유틸리티를 사용하여 텍스트의 font-weightfont-style를 빠르게 변경하세요. font-style 유틸리티는 .fst-*로 축약되고 font-weight 유틸리티는 .fw-*로 축약됩니다.

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

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-medium">Medium 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-* 유틸리티를 사용하여 행간을 변경하세요.

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.

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.

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.

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.

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를 사용하여 선택 영역을 고정폭 글꼴 스택으로 변경하세요.

This is in monospace

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

색상 재설정

부모 항목의 색상을 상속하도록 .text-reset로 텍스트나 링크의 색상을 초기화하세요.

Secondary body text with a reset link.

html
<p class="text-body-secondary">
  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>

텍스트 꾸미기

텍스트 꾸미기 클래스를 사용하여 컴포넌트의 텍스트를 장식하세요.

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed
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>

CSS

Sass 변수

Sass 변수와 관련된 기본 유형 및 글꼴입니다:

// 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-medium:          500;
$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;

Sass 맵

글꼴 크기 유틸리티는 유틸리티 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
);
$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

유틸리티 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: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    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
),