overflow文本溢出几种属性

最新推荐文章于 2022-05-19 08:00:00 发布

置顶 Stirve unremitting

最新推荐文章于 2022-05-19 08:00:00 发布

阅读量112

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104857114

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!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>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow文本溢出几种属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} .box1{ width:100px; height:100px; ...
复制链接

扫一扫