CSS基础教程（十七） 溢出Overflow

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>

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