文本溢出隐藏

最新推荐文章于 2023-03-28 10:34:29 发布

中平签

最新推荐文章于 2023-03-28 10:34:29 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签：寒鸦飞数点

本文链接：https://blog.youkuaiyun.com/weixin_43392545/article/details/89350568

单行

p1{	
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

多行 ps：只兼容了谷歌//ios可能异常

.p1{
	overflow: hidden;
 	text-overflow: ellipsis;
	display: -webkit-box;
 	-webkit-line-clamp: 3;
 	-webkit-box-orient: vertical;
}；

兼容多种多行显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多行文本实现省略号显示</title>
</head>
<style type="text/css">
    /*纯css实现省略号，兼容火狐，IE9，chrome*/
	.wrap{
		height:40px;line-height:20px;overflow: hidden;width:500px;background:#999;
	}
	.wrap .text{
		float:right;margin-left:-5px;width:500px;word-break: break-all;
	}
	.wrap::before{
		float:left;width:5px;content:'';height:40px;
	}
	.wrap::after{
		float:right;content:'...';height:20px;line-height:20px;
		width:30px;margin-left:-30px;/*更改宽度和边距，移动省略号位置*/
		position:relative;left:100%;top:-20px;
		padding-right:5px;background:#999;
	}
</style>
<body>
	<div class="wrap">
		<div class = "text">
			ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试
		</div>
	</div>
</body>
转载自： https://blog.youkuaiyun.com/qdmoment/article/details/84971312