CSS溢出使用方法教程详细介绍 _CSS根本常识

当我们在一个固定的区域来显示一个文字或者一个内嵌页面，不一定做的内容和页面刚好匹配，这种环境下就会呈现溢出，溢出的时辰我们可以选择显示滚动条和选择不显示滚动条这几种环境来处置。

需要这些哦
CSS根本常识
HTML根本常识
方式/
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>
可以看到，固然文字很好，这个区域可以或许完当作显示可是呢仍是添加了一个滚动条，具体结果图如下。