# 文本和排版

控制文本大小、对齐、换行、溢出、变形等等。

# 排版

使用排版辅助类控制文本的大小和样式. 这些值基于 Material设计规范.

这些类可以应用于从 xsxl 的所有断点。 当使用基础类 .text-{value} 时, 它被推断为 .text-xs-${value}.

  • .text-{value} 用于 xs
  • .text-{breakpoint}-{value} 用于 sm, md, lgxl

value 属性的值是以下之一:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle-1
  • subtitle-2
  • body-1
  • body-2
  • button
  • caption
  • overline

下面的示例演示如何在不同的断点显示不同的大小:

# 强调字体

Material 设计, 默认情况下, 支持 100, 300, 400, 500, 700, 900 字体宽度和斜体文本.

# 文本

# 对齐

Alignment 助手类允许你轻松的创建 re-align 文本。

还有可用于支持响应式显示的 alignment 类。

# 装饰线

使用 .text-decoration-none 移除文本装饰线或使用 .text-decoration-overline, .text-decoration-underline, 和 .text-decoration-line-through 添加一个 上划线, 下划线或删除线.

# 不透明度

不透明度辅助类可以让您轻松调整文本的重点. text--primary 与默认文本具有相同的不透明度。 text--secondary 用于提示和辅助文本。 使用 text--disabled 去除强调文本。

# 变形

文本 capitalization 类可以转换文字的大小写。

也可以断开文本或删除 text-transform . 在第一个示例中, 自定义类 text-transform: uppercase 将被覆盖,并允许保留文本大小写。 在第二个示例中,我们将一个较长的单词拆分以填充可用空间。

# 文本换行和溢出

您可以使用 .text-no-wrap 工具类来防止文本换行.

Longer content can be truncated with a text ellipsis using the .text-truncate utility class.

# RTL 对齐

When using RTL, you may want to keep the alignment regardless of the rtl designation. 这可以通过以下格式的文本对齐辅助类实现: text-{breakpoint}-{direction}, breakpoint 可以是 sm, md, lg>xl, direction 可以是 leftright. 你也可以通过使用 startend 对齐rtl.

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM