文本

文字-Bootstrap 5和Material Design 2.0

通用文本实用程序的文档和示例,用于控制对齐方式,自动换行,粗细, 和更多。


文字对齐

使用文本对齐类轻松地将文本重新对齐到组件。对于左,右和中心 对齐,可以使用与视口宽度断点相同的响应类 网格系统。

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

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

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

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

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


          <p class="text-start">Left aligned text on all viewport sizes.</p>
          <p class="text-center">Center aligned text on all viewport sizes.</p>
          <p class="text-end">Right aligned text on all viewport sizes.</p>

          <p class="text-sm-start">Left aligned text on viewports sized SM (small) or wider.</p>
          <p class="text-md-start">Left aligned text on viewports sized MD (medium) or wider.</p>
          <p class="text-lg-start">Left aligned text on viewports sized LG (large) or wider.</p>
          <p class="text-xl-start">
            Left aligned text on viewports sized XL (extra-large) or wider.
          </p>
        

注意:我们不提供用于合理文本的实用程序类。而, 从美学上讲,合理的文本可能看起来更具吸引力,但确实使单词间距更加随机 因此较难阅读。


文字换行和溢出

使用 .text-wrap 类包装文本。

This text should wrap.

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

使用 .text-nowrap 类防止文本换行。

This text should overflow the parent.

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

断字

通过使用防止长文本字符串破坏组件的布局 .text-break 设置自动换行:break-word 断字:断字。我们使用自动换行而不是更常见的 overflow-wrap 以获得更广泛的浏览器支持,并添加已弃用的 word-break:break-word 可以避免Flex容器出现问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm


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

文字转换

使用文本大写类在组件中转换文本。

Lowercased text.

Uppercased text.

CapiTaliZed text.


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

通过修改以下内容自定义可用的 font-sizes $ font-sizes Sass地图。


          $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 );
        

字体粗细和斜体

使用这些快速更改文本的 font-weight font-style 实用程序。 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 without 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 without font style</p>
        

线高

使用 .lh-* 实用程序更改行高。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.


          <p class="lh-1">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio
            dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
            Cras mattis consectetur purus sit amet fermentum.
          </p>
          <p class="lh-sm">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio
            dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
            Cras mattis consectetur purus sit amet fermentum.
          </p>
          <p class="lh-base">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio
            dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
            Cras mattis consectetur purus sit amet fermentum.
          </p>
          <p class="lh-lg">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio
            dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
            Cras mattis consectetur purus sit amet fermentum.
          </p>
        

等宽空间

使用 .font-monospace 将选择更改为我们的等宽字体堆栈。

This is in monospace


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

重置颜色

使用 .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>
        

文字装饰

用文本装饰类装饰组件中的文本。

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>