95%的人都回答不上来的问题：如何更友好的控制元素内容溢出边界？

最新推荐文章于 2024-07-22 15:19:55 发布

前端小目标

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量363

点赞数 9

分类专栏： # CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_30094821/article/details/138265622

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1. 基础知识

什么是overflow

overflow 是 CSS 中的一个属性，它定义了当元素的内容超出其指定大小时应该发生什么。

简单来说，它就是控制元素内部内容溢出边界时的显示方式。

为何要使用 overflow

使用 overflow 属性，我们可以决定是否显示滚动条、裁剪内容或者让内容溢出。

这在创建网页布局时至关重要，它决定了用户如何与超出容器的内容互动，保证了页面的整洁性和用户体验。

如何使用 overflow

overflow 属性有几个值：

visible：默认值，溢出的内容不会被裁剪，会呈现在元素框之外。
hidden：溢出的内容会被裁剪，不会显示滚动条。
scroll：溢出的内容会被裁剪，但提供滚动条来查看其余内容。
auto：如果内容溢出，则会显示滚动条。

你也可以对 overflow-x 和 overflow-y 分别设置，控制水平或垂直方向的溢出行为。

适用场景

overflow 属性适用于任何需要管理内容溢出的场景。

例如，创建一个固定大小的侧边栏菜单、图片轮播、文本框等。它在制作响应式网页、确保内容在不同设备上的可读性方面尤其重要。

2. 示例演示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>overflow 示例</title>
  <style>
    .box {
      width: 200px;
      height: 50px;
      margin: 30px;
      border: 1px solid #000;
    }

    .visible {
      overflow: visible;
    }

    .hidden {
      overflow: hidden;
    }

    .scroll {
      overflow: scroll;
    }

    .auto {
      overflow: auto;
    }
</style>
</head>

<body>
  <div class="box visible">
    这是 overflow: visible。内容溢出容器，可以看到全部内容。
  </div>
  <div class="box hidden">
    这是 overflow: hidden。内容溢出容器，但不可见，没有滚动条。
  </div>
  <div class="box scroll">
    这是 overflow: scroll。不管内容是否溢出，总是显示滚动条。
    <p>多余的内容会在滚动时显示。</p>
  </div>
  <div class="box auto">
    这是 overflow: auto。内容溢出时，滚动条自动出现。
    <p>多余的内容会在滚动时显示。</p>
  </div>
</body>

</html>

在这个示例中，创建了4 个 div，每个 div 分别应用了不同的 overflow 值。你可以看到它们处理内容溢出的不同方式。