css text-overflow

最新推荐文章于 2023-02-23 16:54:26 发布

信-老僧

最新推荐文章于 2023-02-23 16:54:26 发布

阅读量458

点赞数

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.csdn.net/FOLOYO586/article/details/46899347

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-overflow</title>
<meta name="author" content="老僧" />
<style>
	.ellipsis{
		white-space:nowrap;
		width:100px;
		text-overflow:ellipsis;
		display:block;
		border:1px solid #CC0000;
		overflow:hidden;
	}
	.clip{
		white-space:nowrap;
		width:100px;
		text-overflow:clip;
		display:block;
		border:1px solid #CC0000;
		overflow:hidden;
	}
	.desc{
		width:500px;
		height:200px;
		border:1px solid;
		border-color:rey;
		background-color:yellow;
		
	}
	.center{
		margin:auto;
		background:#CCFF00;
		border:1px solid;
		width:1000px;
		height:500px;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-250px;
		margin-left:-500px;
	}
</style>
</head>
<body>
	<div class="center">
		<div>
			<p>我爱北京天安门，天安门上太阳升</p>
			<p>超出部分影藏+...</p>
			<p class="ellipsis">我爱北京天安门，天安门上太阳升</p>
			<p>超出部分影藏</p>
			<p class="clip">我爱北京天安门，天安门上太阳升</p>
		</div>
		<div class="desc">
			text-overflow 两个属性
			clip 只影藏
			ellipsis 影藏+...
			和overflow:hidden 超出影藏
			white-space:nowrap 不折行
			联用
		</div>
	</div>
</body>
</html>