css中的内容溢出

 内容溢出是指当设置好了一个层的宽和高后，由于内容比较多的缘故，导致内容溢出了设定好的宽度和高度。实例如下：

     

 效果如下：

 

可以明显的看到文章的内容溢出了设定好的边框， 这就是内容溢出的问题。

内容溢出的解决方法有多种，但是我们要找到最合适的解决方法：

 在css中有个属性 overflow专用于解决内容溢出方面的问题。

overflow有一下几个值  visible是默认值，既不处理。 scroll添加滚动条，实例：

  

  效果如下：

  

能够看到 右边和下边都加上了滚动条，大家有没有感觉这种效果很难看！！  并且左右滚动条还不符合大家的使用习惯，所以这种效果一般不用。

auto为自动，既当内容超出时加上滚动条，不超出时则不加。把上边代码的scroll  改为 auto 我们就可以看到效果如下：

  

可以看到下半框上的左右滚动条没有了，这样就好看点了，可是这种效果其实还是不太理想。

我们可以试试这个属性  hidden  这个属性的设置是 把超出的部分给隐藏了，这样可以大大的加强网页的美观，事实上许多网站也是这样设计的。我们现在把 auto改为  hidden看下效果：

  

  看到超出的部分被隐藏了，这种效果是最佳的效果。  

当需要边框的宽度随着内容的增加而增加时，我们可以有一下几种做法：

  1.不设置边框的高 既height属性我们看下效果：

      可以看到高随着内容变大了，这是在火狐浏览器中的效果，这种效果在不同的浏览器中有不同的效果，要想在所有浏览器中都有这中效果 我们就需要这样来做  把 height:auto;   overflow:auto; 这样所有的浏览器中效果就会一样了。