文本处理网站建设网页设计网站开发小程序独立站跨境电商二维码制作

bootstrap使用手册

文本处理

Bootstrap提供了多种文本处理类，包括对齐、字体样式、颜色和大小等，使得在网站建设、网页设计、网站开发、小程序、独立站和跨境电商等项目中能够快速且灵活地控制文本的样式和排版，为用户带来更加优秀的视觉体验。开发人员可以根据具体需求选择相应的文本处理类，以提高页面的可读性和可用性，增强页面的设计感和品牌特色。

用于控制文本的对齐、组合、字重等示例以及使用文档。

文本对齐

使用文本对齐class样式类轻松地将文本重新对齐到组件。

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

左对齐、右对齐、居中对齐，可以使用与栅格系统相同的宽度响应式类（即text-sm-*、text-lg-*等方法）来定义。

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

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

文本包裹和溢出（换行）处理

使用.text-wrap类换行文本.

This text should wrap.

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

.text-nowrap class样式类可以防止文本换行.

This text should overflow the parent.

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

对于更长的内容，你可以添加一个 .text-truncate class样式，以省略号截断文本（需要结合 display: inline-block 或 display: block来使用）。

Praeterea iter est quasdam res quas ex communi.

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

换行

通过使用.text-break来设置overflow-wrap: break-word (和word-break: break-word 用于IE和Edge兼容性的break-word)防止长串文本破坏组件的布局.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

字母大小写转换

使用文本大小写样式将文字内容由小写，转为大写（不支持中文）。

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

注意： text-capitalize仅支持每一个词的第一个字母转为大写，而其它字母不受影响。

字体粗细和斜体效果

快速的实体字体粗细定义、斜体。

Bold text.

Normal weight text.

Light weight text.

Italic text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

等宽字体

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

这是等宽

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

重置颜色

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

Muted text with a reset link.

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

文字装饰

使用.text-decoration-none类删除文本修饰.

Non-underlined link

<a href="#" class="text-decoration-none">Non-underlined link</a>

加入 DEVDIY 开发者社区

利用 DEVDIY 资源快速拓展您的业务
有兴趣与 DEVDIY 开发者合作吗？