CSS设置溢出隐藏效果

最新推荐文章于 2024-04-29 21:14:52 发布

就今天去

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量7.1k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_56047670/article/details/122286547

版权

虽然是很普通，但是往往有时候就是这么一个小细节上忙得够呛，记录一下

在CSS中，可以利用overflow属性，使用overflow:hidden来设置溢出隐藏。

overflow属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。

在overflow中的四种属性值：

visible：默认值。内容不会被修剪，会呈现在元素框之外。

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

>>> 如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

先看效果图：（猛男色背景）

1、overflow: hidden;

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置溢出隐藏</title>
    <style>
        .overflow_hide {
            margin-top: 100px;
            text-align: center;
        }
        .overflow_hide .overflow_hide_box {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            background-color: pink;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="overflow_hide">
        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
        <div class="overflow_hide_box">
            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
        </div>
    </div>
</body>

</html>

2、再看下 overflow: scroll;