Skip to content

文本和排版

控制文本大小,对齐,包装,溢出,转换和更多。默认情况下,Vuetify 使用材料设计规范 Roboto Font.

Typography (排版)

使用 Typography 帮助器类控制文本的大小和样式。这些值是基于Material Design type specification.

Breakpoints (断点)

所有的排版类都支持框架中其他部分的响应式断点。基类.text-{value}对应于xsAndUp断点,而类.text-{breakpoint}-{value}可用于其余的断点(sm, md, lgxl)。

下面的例子展示了一个稍微做作的例子,说明如何使用不同的类来实现效果:

Font emphasis (强调字体)

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

Text (文本)

Alignment (对齐)

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

对齐类还支持响应式断点。

Decoration (装饰线)

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

Opacity (不透明度)

不透明度辅助类允许您轻松调整文本的强调。text-high-emphasis的文本与默认文本具有相同的不透明度。text-medium-emphasis用于提示和辅助文本。text-disabled用于不再强调文本。

变形

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

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

Wrapping and overflow (文本换行和溢出)

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

可以使用.text-truncate实用程序类使用文本省略号截断较长的内容。

INFO

需要 display: inline-block display: block.

RTL Alignment (对齐)

使用RTL时 ,无论当前文本方向如何,您都可能希望保持对齐方式。这可以通过将方向设置为left or right来实现。

如果您希望对齐方式响应当前文本方向,请使用 use startend.