CSS溢出使用方法教程详细介绍
1、首先我们来设计一个背景为红色的，大小为100px*100px的矩形框，框中输入文字，看看我们不设计滚动方面的属性默认显示的效果是什么样子的？具体代码如下：<html> <head> <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS 我爱HTML，我爱CSS我爱HTML，我爱CSS 我爱HTML，我爱CSS </div> </body></html>可以看到超出区域的文字显示在下面了，没有滚动条。
2、如果要将文字就只显示在固定区域内呢？我没这里可以用overflow来设置为auto，具体代码如下：<html> <head> <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; overflow:auto; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS 我爱HTML，我爱CSS我爱HTML，我爱CSS 我爱HTML，我爱CSS </div> </body></html>可以看到如下图所示的效果，区域显示不下的时候自动添加了滚动条。
3、如果我们需要将显示不了的文字裁剪掉，固定区域能显示多少就显示多少，不要滚动条该怎么做呢？具体代码如下：<html> <head>稆糨孝汶; <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; overflow:hidden; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS 我爱HTML，我爱CSS我爱HTML，我爱CSS 我爱HTML，我爱CSS </div> </body></html>可以看到，将显示不了的内容裁剪掉了，这个区域内只显示了能显示的内容了。
4、还有一种情况就是不管内容超没超出区域都会显示滚动条，这里可以看看具体的代码和效果：<html> <head>艘早祓胂 <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; overflow:scroll; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS 我爱HTML，我爱CSS我爱HTML，我爱CSS 我爱HTML，我爱CSS </div> </body></html>可以看到，虽然文字很好，这个区域能够完成显示但是呢还是添加了一个滚动条，具体效果图如下。
5、只显示竖着的滚动条，具体代码如下：<html> <head> <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; overflow-y:scroll; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS </div> </body></html>如下图，是不是只显示了竖着的滚动条了。
6、还可以只显示横着的滚动条，具体代码如下：<html> <head> <title>溢出相关</title> <style> .div1{ background-color:red; height:100px; width:100px; overflow-x:scroll; } </style> </head> <body> <div class="div1">我爱HTML，我爱CSS </div> </body></html>可以看到，下图的效果，只显示了横着的滚动条，其实横着竖着的滚动条还有很多其他的设置。
