当前位置：网站首页 > 创业 > 正文

CSS溢出使用方法教程详细介绍

张子豪 2025-10-12 10:08 1

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

东西/原料

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>
可以看到，固然文字很好，这个区域可以或许完当作显示可是呢仍是添加了一个滚动条，具体结果图如下。
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>
可以看到，下图的结果，只显示了横着的滚动条，其实横着竖着的滚动条还有良多其他的设置。