学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

CSS基础教程(十七) 溢出Overflow

发布时间:2020-01-13 点击:66

    CSS中的Overflow是用来控制标签元素中内容超出元素边界的处理方式,处理方式一般有超出显示visible、滚动scroll、裁剪hidden等.

    一、为什么需要处理溢出

    在CSS中如果不用溢出来处理的话,当内容超出元素标签边界时,会超出显示,就像下面这张图。

    上图的布局不仅破坏了div的单行限宽显示,其他相关元素也会相应的挤出原有的位置,所以这时就需要overflow来处理溢出的处理,以达到我们布局的目的,默认值overflow:visible就是这种情况。

    二、处理方式一:裁剪隐藏hidden

    我们可以使用overflow:hidden,属性来设置超出部分隐藏,然后显示如下:

    三、处理方式二:滚动显示scroll

    在这里同样的我们需要设置overflow:scroll;属性来定义超出部分使用滚动条来显示:

    四、上述代码

    <style>
                div{
                    border: 1px solid black;
                    width:200px;
                    overflow: visible;
                    /*overflow: hidden;*/
                    /*overflow: scroll;*/
                    white-space: nowrap; /*此处代码的含义是不换行显示*/
                }
            </style>
        <div>hello 我是文本演示呦~hello 我是文本演示呦~hello 我是文本演示呦~</div>

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: