小黑前端css摸索之旅:overflow text-overflow属性

最新推荐文章于 2024-08-15 18:19:19 发布

爱喝喜茶爱吃烤冷面的小黑黑

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量72

点赞数

分类专栏：小黑前端入门文章标签：前端 css

本文链接：https://blog.csdn.net/qq_37418807/article/details/135109401

版权

小黑前端入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title>
		<style>
			div.ex1{
				background:lightblue;
				width:100px;
				height:50px;
				overflow:scroll;
			}
			div.ex2{
				background:lightblue;
				width:100px;
				height:50px;
				overflow:hidden;
			}
			div.ex3{
				background:lightblue;
				width:100px;
				height:50px;
				overflow:auto;
			}
			div.ex4{
				background:lightblue;
				width:100px;
				height:50px;
				overflow:visible;
			}
		</style>
	</head>
	<body>
		<h2>overflow: scroll:显示滚动条</h2>
		<div class='ex1'>
			小黑就是喜欢你，一起跑起来
		</div>
		<h2>overflow: hidden 超出区域则隐藏</h2>
		<div class='ex2'>
			小黑就是喜欢你，一起跑起来
		</div>
		<h2>overflow: auto 超出区域则显示进度条</h2>
		<div class='ex3'>
			小黑就是喜欢你，一起跑起来
		</div>
		<h2>overflow: visib 超出区域不会被修剪(默认)</h2>
		<div class='ex4'>
			小黑就是喜欢你，一起跑起来
		</div>
	</body>
</html>

在这里插入图片描述

text-overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title> 
		<style> 
			.test{
				white-space:nowrap;    /* 文本不会换行，在这一行继续 */
				width:12em;
				overflow:hidden;
				border:1px solid #000000
			}
		</style>
	</head>
	<body>
		<p> 使用text-overflow:ellipsis（显示省略符号 ... 来代表被修剪的文本） </p>
		<div class='test' style='text-overflow:ellipsis'>
			小黑就是非常喜欢你，爱吃驴，好好学习好好跑步坚决不躺平！！！！！
		</div>
		<p> 使用text-overflow:clip（剪切文本） </p>
		<div class='test' style='text-overflow:clip'>
			小黑就是非常喜欢你，爱吃驴，好好学习好好跑步坚决不躺平！！！！！
		</div>
	</body>
</html>

在这里插入图片描述

多行溢出省略号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div.test
{
	white-space:wrap; 
	width:12em; 
	overflow:hidden; 
	border:1px solid #000000;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	
}
</style>
</head>
<body>

<p>div 使用多行，溢出省略号...</p>

<div class="test" style="text-overflow:ellipsis;"><span>This is some long text that will not fit in the box</span></div>
</body>
</html>