Bootstrap5 文本(Text)

半兽人 发表于: 2020-07-27   最后更新时间: 2022-02-12 13:52:50  
{{totalSubscript}} 订阅, 2,961 游览

文本(Text)

Text的文档和示例,用于控制对齐、包装、重量等。

文本对齐(Text alignment)

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

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

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

在线运行

请注意,我们没有为对齐的文本提供实用类。虽然从美学上讲,对齐的文本可能看起来更吸引人,但它确实使字距更随机,因此也更难阅读。

文本包装和溢出(Text wrapping and overflow)

.text-wrap来包裹文本。

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

在线运行

.text-nowrap类来防止文字被包裹。

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

在线运行

单词分割(Word break)

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

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

在线运行

文本转换(Text transform)

用文本大写字母类来转换组件中的文本。

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

<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-size的Sass map来定制你的可用字体大小。

字体重量和斜体(Font weight and italics)

快速改变文本的重量(粗体)或斜体化。

<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 with normal font style</p>

在线运行

线条高度(Line height)

.lh-*工具改变行高。

<p class="lh-1">Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.</p>
<p class="lh-sm">But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.</p>
<p class="lh-base">I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.</p>
<p class="lh-lg">But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.</p>

在线运行

等宽字体(Monospace)

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

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

在线运行

重置颜色(Reset color)

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

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

在线运行

文字装饰(Text decoration)

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

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

在线运行

更新于 2022-02-12
在线,1小时前登录

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章
提问