• 技术文章 >web前端 >css教程

    css怎么实现超出高度隐藏

    青灯夜游青灯夜游2021-07-14 16:47:19原创105

    在CSS中,可以利用overflow-y属性来实现超出高度隐藏效果,只需要给元素添加“overflow-y:hidden”样式即可。overflow-y属性规定当内容溢出元素上/下边缘时发生的事情,当值为hidden时,超出部分会被隐藏。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在CSS中,可以利用overflow-y属性来实现超出高度隐藏效果。

    下面通过代码示例来看看:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:500px;
    height:90px;
    border:thin solid black;
    overflow-y:hidden;
    }
    </style>
    </head>
    <body>
    
    <div>
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    </div>
    </body>
    </html>

    效果图:

    1.png

    说明:

    overflow-y属性规定当内容溢出元素上/下边缘时发生的事情;当值为hidden时,内容会被修剪,并且超出部分会被隐藏。

    overflow-y属性有以下值:

    描述
    visible默认值。内容不会被修剪,会呈现在元素框之外。
    hidden内容会被修剪,并且其余内容是不可见的。
    scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    no-display如果内容不适合内容框,则删除整个框。
    no-content如果内容不适合内容框,则隐藏整个内容。

    (学习视频分享:css视频教程

    以上就是css怎么实现超出高度隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 超出高度隐藏
    上一篇:css如何加空格 下一篇:css怎么设置文本框宽度
    第16期线上培训班

    相关文章推荐

    • 边框颜色css怎么设置• css三种颜色写法是什么• css3哪个是设置动画播放次数• css3如何实现图片平移• css怎么控制元素隐藏• css如何加空格

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网