跳到主要内容

文本工具

Bootstrap 5 提供全面的文本工具类,包括对齐、换行、大小写转换、文字装饰和字重控制。

文本对齐

类名效果
.text-start左对齐
.text-center居中
.text-end右对齐
.text-justify两端对齐
<p class="text-start">左对齐</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>
<p class="text-sm-center">小屏及以上居中</p>

文本换行与溢出

类名效果
.text-wrap正常换行(默认)
.text-nowrap禁止换行
.text-truncate单行截断(显示省略号)
.text-break强制换行(防止长单词溢出)
<div class="text-nowrap" style="width:100px">不会换行的长文本内容</div>
<div class="text-truncate" style="width:150px">超出部分显示省略号的长文本</div>

大小写转换

<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>

字重与斜体

类名字重
.fw-bold700(粗体)
.fw-bolderbolder(相对更粗)
.fw-semibold600(半粗)
.fw-normal400(正常)
.fw-light300(细体)
.fw-lighterlighter(相对更细)
.fst-italic斜体
.fst-normal正常样式

文字装饰

<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>
<p class="text-decoration-none">无装饰(常用于链接)</p>

字体大小

使用 .fs-1.fs-6 快速设置字体大小:

类名大小
.fs-12.5rem (40px)
.fs-22rem (32px)
.fs-31.75rem (28px)
.fs-41.5rem (24px)
.fs-51.25rem (20px)
.fs-61rem (16px)
<p class="fs-1 fw-bold">超大标题</p>
<p class="fs-4 text-secondary">中等副标题</p>
<p class="fs-6 text-muted">小号注释文本</p>

行高

<p class="lh-1">行高 1(紧密)</p>
<p class="lh-sm">行高 1.25</p>
<p class="lh-base">行高 1.5(默认)</p>
<p class="lh-lg">行高 2(宽松)</p>

等宽字体

<p class="font-monospace">等宽字体文本,适合代码展示</p>

本网站使用 Cookie 来提升您的浏览体验。隐私政策