Skip to main content Skip to docs navigation
View on GitHub

Text文本

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.用于控制对齐、换行、重量等的常用文本实用程序的文档和示例。

On this page本页内容

Text alignment文本对齐方式

Easily realign text to components with text alignment classes. 使用文本对齐类轻松地将文本重新对齐到组件。For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.对于开始、结束和中心对齐，可以使用与网格系统相同的视口宽度断点的响应类。

Start aligned text on all viewport sizes.在所有视口大小上开始对齐文本。

Center aligned text on all viewport sizes.在所有视口大小上居中对齐文本。

End aligned text on all viewport sizes.在所有视口大小上结束对齐文本。

Start aligned text on viewports sized SM (small) or wider.在尺寸为SM（小）或更宽的视口上开始对齐文本。

Start aligned text on viewports sized MD (medium) or wider.在尺寸为MD（中等）或更宽的视口上开始对齐文本。

Start aligned text on viewports sized LG (large) or wider.在尺寸为LG（大）或更宽的视口上开始对齐文本。

Start aligned text on viewports sized XL (extra-large) or wider.在尺寸为XL（特大）或更宽的视口上开始对齐文本。

<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>
Note that we don’t provide utility classes for justified text. 注意，我们没有为对齐的文本提供实用程序类。While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.虽然从美学上讲，合理的文本可能看起来更吸引人，但它确实会使单词间距更随意，因此更难阅读。

Text wrapping and overflow文本换行和溢出

Wrap text with a .text-wrap class.使用.text-wrap类换行文本。

This text should wrap.此文本应换行。 
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>

Prevent text from wrapping with a .text-nowrap class.防止文本用.text-nowrap类换行。

This text should overflow the parent.此文本应溢出父级。 
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>

Word break分词

Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. 通过使用.text-break设置word-wrap: break-word和word-break: break-word，防止长文本字符串破坏组件的布局。We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.为了更广泛的浏览器支持，我们使用word-wrap代替更常见的overflow-wrap，并添加了不推荐使用的word-break: break-word，以避免flex容器出现问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Note that breaking words isn’t possible in Arabic, which is the most used RTL language. 请注意，阿拉伯语是最常用的RTL语言，不可能断开单词。Therefore .text-break is removed from our RTL compiled CSS.因此，从RTL编译的CSS中删除了.text-break。

Text transform文本转换

Transform text in components with text capitalization classes.使用文本大写类转换组件中的文本。

Lowercased text.小写文本。

Uppercased text.大写文本。

CapiTaliZed text.CapiTaliZed文本。

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

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.注意.text-capitalize只改变每个单词的第一个字母，而不影响其他字母的大小写。

Font size字体大小

Quickly change the font-size of text. 快速更改文本的font-size。While our heading classes (e.g., .h1–.h6) apply font-size, font-weight, and line-height, these utilities only apply font-size. 虽然标题类（例如.h1-.h6）应用font-size、font-weight和line-height，但这些实用程序只应用font-size。Sizing for these utilities matches HTML’s heading elements, so as the number increases, their size decreases.这些实用程序的大小与HTML的标题元素相匹配，因此随着数量的增加，它们的大小会减小。

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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

Customize your available font-sizes by modifying the $font-sizes Sass map.通过修改$font-sizes Sass映射来自定义可用的font-size。

Font weight and italics字体粗细和斜体

Quickly change the font-weight or font-style of text with these utilities. 使用这些实用程序快速更改文本的font-weight或font-style。font-style utilities are abbreviated as .fst-* and font-weight utilities are abbreviated as .fw-*.font-style工具缩写为.fst-*，font-weight工具缩写为.fw-*。

Bold text.粗体文本。

Bolder weight text (relative to the parent element).粗体文本（相对于父元素）。

Normal weight text.正常重量文本。

Light weight text.轻质文本。

Lighter weight text (relative to the parent element).较轻的文本（相对于父元素）。

Italic text.斜体文本。

Text with normal font style具有正常字体样式的文本

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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>

Line height线路高度

Change the line height with .lh-* utilities.使用.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.这些类可以根据需要使用实用程序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.这些类可以根据需要使用实用程序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.这些类可以根据需要使用实用程序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.这些类可以根据需要使用实用程序API进行定制。

<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.这些类可以根据需要使用实用程序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.类应用于元素本身，有时应用于父元素。这些类可以根据需要使用实用程序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.这些类可以根据需要使用实用程序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.这些类可以根据需要使用实用程序API进行定制。</p>

Monospace

Change a selection to our monospace font stack with .font-monospace.使用.font-monospace将所选内容更改为单空间字体堆栈。

This is in monospace

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

Reset color重置颜色

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.通过.text-reset重置文本或链接的颜色，使其继承其父项的颜色。

Muted text with a reset link. 

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

Text decoration文本装饰

Decorate text in components with text decoration classes.用文本修饰类修饰组件中的文本。

This text has a line underneath it.

This text has a line going through it.

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

Variables变量

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-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-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;

Maps

Font-size utilities are generated from this map, in combination with our utilities API.字体大小实用程序是从这个映射中结合实用程序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
);

Utilities API实用程序API

Font and text utilities are declared in our utilities API in scss/_utilities.scss. 字体和文本实用程序在scss/_utilities.scss中的实用程序API中声明。Learn how to use the utilities API.了解如何使用实用程序API。

    "font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-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,
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
),