CSS溢出属性

overflow-溢出属性

<!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>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur a
        dipisicing elit. Eveniet, impedit fugiat
         ex laborum quas illo. Veniam fuga accusa
         mus possimus ex esse animi officia unde dol
         oribus fugit reiciendis. Nemo, natus reiciendis.
         Lorem, ipsum dolor sit amet consectetur adipisic
         ing elit. Nobis, dolor? Dignissimos labore plac
         eat similique minus facilis id quos, harum sit, 
         culpa nemo, aliquam dolorum nostrum tempore nisi
          quam odio iusto.
    </div>
</body>
</html>

上面这段代码运行后结果如下图 所示

 将overflow修改为hidden后就会把超出盒子的文本都切除掉,如下图所示

修改为scroll后则是加上了滚动条,如下图所示,此时我们可通过滚动条查看上下文本内容或左右文本内容,只有一点文本的时候使用overflow也会出现滚动条(不生效)

修改为auto后,则是根据文本内容自动出现滚动条,如果文本内容很少就不会出现滚动条,文本内容很多导致溢出盒子时才会出现滚动条,如下图所示(overflow属性均为auto)

 修改为inherit则是继承父元素的overflow属性,父元素是啥就是啥

  • 若只想设置x轴或y轴的滚动条,则写overflow-x或overflow-y

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值