Css_overflow详解

最新推荐文章于 2024-08-09 14:48:09 发布

Rapper_cl

最新推荐文章于 2024-08-09 14:48:09 发布

阅读量2.6k

点赞数 1

分类专栏： Css

本文链接：https://blog.csdn.net/m0_37510446/article/details/89944665

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本章主要是对Css中的overflow元素进行讲解：
该元素主要是用来处理，当我们的文本超出指定文本框时，如何进行处理
首先分别讲一下overflow的五大属性：
visiable:当我们的文本超出文本框时，其内容不会被修剪，会显示在文本框之外

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:50px;
height:60px;
overflow:visiable;
}
</style>
</head>
<body>
<div id="cc">
<h>采用visiable，当文本超出指定的文本框时，其内容不会被修剪，其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>

hidden:隐藏属性，很容易理解，当文本超出文本框时，就会被隐藏，即多余的文本会被修剪不可见

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:yellow;
padding:20px 20px;
width:50px;
height:60px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="cc">
<p>采用hidden，当文本超出指定的文本框时，其内容会被修剪，且不可见</p>
</div>
</body>
</html>

scroll:采用scroll属性，不管文本是否会超出文本框，都会出现滚动栏

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:200px;
height:200px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="cc">
<h>采用scroll，当文本超出指定的文本框时，其内容不会被修剪，其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>

auto:与上面的scroll稍有一点不同，相对来说更加智能一点，当文本超出文本框范围时，会出现滚动栏，当文本未超出文本框范围时，不会出现滚动栏，更加智能更加人性化

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:200px;
height:200px;
overflow:auto;
}
</style>
</head>
<body>
<div id="cc">
<h>采用auto，当文本超出指定的文本框时，其内容不会被修剪，其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<div id="cc">
<h>采用auto，当文本超出指定的文本框时，其内容不会被修剪，其超出的内容会被显示在文本框之外</h>
</div>
</body>
</html>

inherit:继承，采用这个属性，其会继承父类的overflow属性,

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:blue;
background-color:red;
padding:20px 20px;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<div  id="cc">
	<h>我是父类</h>
<div id="c0">
<h>采用inherit，会继承上面父类的属性</h>
</div>
	</div>
</body>
</html>

Rapper_cl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css_overflow详解

本章主要是对Css中的overflow元素进行讲解：该元素主要是用来处理，当我们的文本超出指定文本框时，如何进行处理首先分别讲一下overflow的五大属性：visiable:当我们的文本超出文本框时，其内容不会被修剪，会显示在文本框之外<!DOCTYPE　html><html><head><meta charset="UTF-8"/>...
复制链接

扫一扫

专栏目录