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>可以看到超出区域的文字显示在下面了，没有滚动条。
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>可以看到，将显示不了的内容裁剪掉了，这个区域内只显示了能显示的内容了。
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>如下图，是不是只显示了竖着的滚动条了。
