笙亿网络策划

Bootstrap overflow怎么设置？如何控制元素溢出显示？

约 13 分钟读完 40 阅
文章导读
上一个 测验 下一个 本章讨论 Bootstrap 的 overflow（溢出）工具类。overflow 工具类用于控制元素内溢出内容的表现行为。
📋 目录
  1. 壹 overflow-x
  2. 贰 overflow-y
A A

Bootstrap - 溢出

上一个
测验
下一个

本章讨论 Bootstrap 的 overflow（溢出）工具类。overflow 工具类用于控制元素内溢出内容的表现行为。

Bootstrap 提供了几种与 overflow 相关的工具类。这些类默认情况下不是响应式的。

类名 描述
.overflow-auto 如果内容超出元素尺寸，则自动为元素添加滚动条。
.overflow-hidden 当内容超出元素尺寸时隐藏内容。
.overflow-scroll 无论内容是否超出元素尺寸，都为元素添加滚动条。
.overflow-visible 允许内容溢出元素尺寸，不进行裁剪或滚动。

下面来看一个示例：

示例

您可以使用 编辑并运行 选项来编辑并运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container p-3">
    <h4 class="text-start text-primary">
      Overflow 工具类示例</h4>
    <div class="overflow-auto mt-3 pb-5 bg-light" 
     style="max-width: 360px; max-height: 80px;">
         <code>.overflow-auto</code> 是应用于具有设定宽度和高度尺寸的元素上的类。
          按设计，此内容在溢出时将垂直滚动。
    </div>
    <div class="overflow-hidden mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-hidden</code> 是一个应用于具有设定宽度和高度尺寸的元素上的工具类。
          当溢出时将隐藏内容。
    </div>
    <div class="overflow-visible mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-visible</code> 是一个应用于具有设定宽度和高度尺寸的元素上的工具类。
          当溢出时不会隐藏内容。
    </div>
    <div class="overflow-scroll mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-scroll</code> 是一个应用于具有设定宽度和高度尺寸的元素上的工具类。
          无论内容是否溢出，都始终显示滚动条。
    </div>
    <div class="overflow-scroll mt-5 pb-5 bg-light" 
         style="max-width: 360px; max-height: 80px;">
         <code>.overflow-scroll</code> 是一个始终显示滚动条的工具类。
    </div>
    </div>
  </body>
</html>

overflow-x

overflow-x 属性用于控制元素的水平溢出行为。它决定了当元素内的内容沿水平轴超过其宽度时会发生什么。

overflow-x 属性可以有以下值：

Class 描述
.overflow-x-auto 如果内容超过元素的宽度，则自动为元素添加水平滚动条。
.overflow-x-hidden 当内容沿水平轴超过元素的宽度时隐藏内容。
.overflow-x-scroll 无论内容是否超过元素的宽度，都为元素添加水平滚动条。
.overflow-x-visible 允许内容沿水平轴溢出元素的尺寸，而不进行裁剪或滚动。

让我们看一个示例：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container p-3">
        <h4>Overflow-x-* 示例</h4>
        <div class="overflow-x-auto mt-3 pb-5"
        style="max-width: 340px; max-height: 90px;">
        <code>.overflow-x-auto</code> 允许用户水平滚动并查看溢出的内容。
        </div>
        <div class="overflow-x-hidden mt-5 pb-5"
        style="max-width: 340px; max-height: 85px;">
        <code>.overflow-x-hidden</code> 是一个应用于具有设定宽度和高度尺寸的元素上的 class。 
        当沿 x 轴溢出时，这将隐藏内容。
        </div>
        <div class="overflow-x-visible mt-5 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-x-visible</code> 是一个应用于具有设定宽度和高度尺寸的元素上的 class。 
        即使沿 x 轴溢出，这也不会隐藏内容。
        </div>
        <div class="overflow-x-scroll mt-5 pb-5"
        style="max-width: 340px; max-height: 120px;">
        <code>.overflow-x-scroll</code> 
        这确保即使沿水平轴没有实际溢出，也始终存在水平滚动条。
        </div>
    </div>
  </body>
</html>

overflow-y

overflow-y 属性用于控制元素的垂直溢出行为。它决定当元素内容沿垂直轴超过其高度时会发生什么。

overflow-y 属性可以有以下值：

Class 描述
.overflow-y-auto 如果内容超过元素的高度，则自动为元素添加垂直滚动条。
.overflow-y-hidden 当内容沿垂直轴超过元素高度时隐藏内容。
.overflow-y-scroll 无论内容是否超过元素高度，都为元素添加垂直滚动条。
.overflow-y-visible 允许内容沿垂直轴溢出元素的尺寸，而不进行裁剪或滚动。

让我们看一个例子：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Overflow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
        <h4>Overflow-y-* 示例</h4>
        <div class="overflow-y-auto mt-3 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-auto</code> 允许用户垂直滚动并查看溢出的内容。 
        为了调整内容，应该会出现垂直滚动条。
        </div>
        <div class="overflow-y-hidden mt-5 pb-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-hidden</code> 是一个应用于具有设置宽度和高度尺寸的元素上的 class。 
        当沿 y 轴溢出时，这将隐藏内容。
        </div>
        <div class="overflow-y-visible mt-5 pb-5"
        style="max-width: 340px; max-height: 70px;">
        <code>.overflow-y-visible</code> 是一个应用于具有设置宽度和高度尺寸的元素上的 class。 
        即使沿 y 轴溢出，这也不会隐藏内容。
        </div>
        <div class="overflow-y-scroll mt-5"
        style="max-width: 340px; max-height: 80px;">
        <code>.overflow-y-scroll</code> 
        这确保垂直滚动条始终存在，即使沿垂直轴没有实际溢出。
        </div>
    </div>
  </body>
</html>