logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Button 按钮Link 链接
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Text 文本

Text 用于控制对齐、换行、粗细等。

文本对齐

文本换行和溢出

.text-wrap：换行文本
.text-nowrap：不换行

文本截断

对于超长的内容，你可以通过添加.text-truncate 类将文本截断并添加省略号。需要设置 display: inline-block 或 display: block 属性。

单词换行

使用.text-break来设置word-wrap:break-word和防止长文本字符串破坏组件的布局word-break:break-word。
我们使用word-wrap而不是更常见的overflow-wrap以获得更宽度的浏览器支持，并添加已被废弃的word-break:break-word以避免与flex容器的问题。

文本转换

使用文本大写类转换组件中的文本。 注意.text-capitalize只改变每个词的第一个字母，其他字母的大小写不受影响。

字体大小

字体粗细和斜体

快速改变文本的重量（粗体）或斜体化。 使用.fst-更改文本的font-style
使用 .fw-更改文本的font-weight

行高

快速改变文本的重量（粗体）或斜体化。 使用.lh-*更改行高

等宽字体

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

重置颜色

使用.text-reset重置文本或链接的颜色，以便它从其父级继承颜色。

文字装饰

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