文本处理 · Bootstrap

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

大方的金针菇 · 春秋风华录最新章节_春秋风华录全文免费阅读( ...· 11 月前 ·

风流的乌冬面 · ts 和 webview 通信 - ...· 11 月前 ·

朝气蓬勃的圣诞树 · 蜘蛛侠3英雄无归完全版超清 ...· 1 年前 ·

冷静的猴子 · window.onloadとjQueryの$ ...· 1 年前 ·

帅气的玉米 · 比亚迪超混匹敌本田？国产混动崛起历程:从IM ...· 1 年前 ·

使用文本对齐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.
  .text-nowrap class样式类可以防止文本换行.
  This text should overflow the parent.
  <div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
  对于更长的内容，你可以添加一个 .text-truncate class样式，以省略号截断文本（需要结合  display: inline-block 或 display: block来使用）。
       Praeterea iter est quasdam res quas ex communi. 
     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.
<!-- 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>.
使用.text-decoration-none类删除文本修饰.
Non-underlined link
<a href="#" class="text-decoration-none">Non-underlined link</a>