HTML5文本溢出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			.box1{
				width:100px;
				height:100px;
				border:2px solid red;
				float:left;
				margin:10px;
				overflow:hidden;/*文本溢出  隐藏*/
			}
			.box2{
				width: 100px;
				height: 100px;
				float:left;
				margin:10px;
				background: pink;
				overflow:scroll;/*文本溢出 滚动查看*/
			}
			.box3{
				width: 100px;
				height: 100px;
				float:left;
				margin:10px;
				background: yellow;
				overflow:auto;
			}
			.box4{
				width:300px;
				height: 200px;
				background: skyblue;
				float:left;
				overflow:scroll;/*超出隐藏*/
			}
			.box5{
				width: 100px;
				height: 100px;
				background: pink;
				overflow:inherit;/*继承父级设置是怎样,那子集就跟着是怎样的*/
				
			}
		</style>
	</head>
	<body>
		<!--
			overflow:文本溢出设置;
				hidden	超出隐藏
				scroll	超出时,滚动查看(未超出也会有滚动机制)
				auto	超出时,滚动查看(自适应,未超出时不会有滚动机制)
				inherit	继承父级的overflow设置
		-->
		<div class="box1">文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试</div>
		<div class="box2">
			文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试
			<img src="img/logo.jpg" alt="" />
		</div>
		
		<div class="box3">文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试
			<img src="img/logo.jpg" alt="" />
		</div>
		
		<div class="box4">
			<div class="box5">文本溢出测试文本溢出测试文本溢出测试文本溢出测试文本溢出测试</div>
		</div>
		
		
	</body>
</html>

发布了40 篇原创文章 · 获赞 1 · 访问量 1147

猜你喜欢

转载自blog.csdn.net/weixin_46421045/article/details/104857114
今日推荐