学习 Bootstrap 5 之 Overflow 和 Vertical alignment

最新推荐文章于 2023-10-09 18:25:59 发布

_ZestyJt

最新推荐文章于 2023-10-09 18:25:59 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap 5 文章标签： bootstrap css html javascript 前端

本文链接：https://blog.csdn.net/qq_37354060/article/details/122606346

版权

Bootstrap 5 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

学习 Bootstrap 5 之文本溢出和垂直对齐方式

文本溢出 (Overflow)
垂直对齐方式 (Vertical alignment)

文本溢出 (Overflow)

Bootstrap 5 官方文档

1. 当文本超过区域大小时, 自动添加滚动条 class = “overflow-auto”

在这里插入图片描述

  <div class = "container">
    <div class="overflow-auto mb-1" style = "height: 50px; width: 50px">auto</div>
    <div class="overflow-auto mb-1" style = "height: 50px; width: 50px">overflow-auto</div>
  </div>

2. 当文本超过区域大小时, 容纳不下的文本隐藏 class = “overflow-hidden”

在这里插入图片描述

  <div class = "container">
    <div class="overflow-hidden mb-1" style = "height: 50px; width: 50px">overflow-hidden</div>
  </div>

3. 当文本超过区域大小时, 多出的文本超出区域显示 class = “overflow-visible” `(默认)`

在这里插入图片描述

  <div class = "container">
    <div class="mb-1" style = "height: 50px; width: 50px">默认默认默认默认</div>
    <div class="overflow-visible mb-1" style = "height: 50px; width: 50px">overflow-visible overflow-visible</div>
  </div>

4. 无论文本溢不溢出, 都加滚动条 class = “overflow-scroll”

在这里插入图片描述

  <div class = "container">
    <div class="overflow-scroll mb-1" style = "height: 50px; width: 50px">123</div>
    <div class="overflow-scroll mb-1" style = "height: 50px; width: 50px">overflow-scroll</div>
  </div>

垂直对齐方式 (Vertical alignment)

Bootstrap 5 官方文档

类	作用
`.align-baseline`	将元素的基线与其父元素的基线对齐
`.align-top`	将元素及其子元素的顶部与整行顶部对齐
`.align-middle`	将元素的中间与基线和父元素x高度的一半对齐
`.align-bottom`	将元素及其子元素的底部与整个行的底部对齐
`.align-text-top`	将元素的顶部与父元素的字体顶部对齐
`.align-text-bottom`	将元素的底部与父元素的字体底部对齐

1. 按基线对齐 class = “align-baseline”

2. 按顶部对齐 class = “align-top”

3. 按中部对齐 class = “align-middle”

在这里插入图片描述

4. 按底部对齐 class = “align-bottom”

5. 按父元素字体顶部对齐 class = “align-text-top”

6. 按父元素字体底部对齐 class = “align-text-bottom”

7. 6中垂直对齐方式的比较

在这里插入图片描述

  <span class="align-baseline">baseline</span>
  <span class="align-top">top</span>
  <span class="align-middle">middle</span>
  <span class="align-bottom">bottom</span>
  <span class="align-text-top">text-top</span>
  <span class="align-text-bottom">text-bottom</span>

8. 表格中的对比

在这里插入图片描述

  <div class = "container">
    <table style="height: 100px;" class = "border border-success">
      <tbody>
      <tr>
        <td class="align-baseline">baseline</td>
        <td class="align-top">top</td>
        <td class="align-middle">middle</td>
        <td class="align-bottom">bottom</td>
        <td class="align-text-top">text-top</td>
        <td class="align-text-bottom">text-bottom</td>
      </tr>
      </tbody>
    </table>
  </div>