CSS实现单行、多行文本溢出显示省略号(…)

效果图如下:

完整代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test1 {
				width: 300px;
				margin: auto;
				border: 1px solid #e4e4e4;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.test2 {
				width: 300px;
				margin: 20px auto;
				border: 1px solid #e4e4e4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			
			.test3 {
				position: relative;
				line-height: 20px;
				max-height: 40px;
				overflow: hidden;
				width: 300px;
				margin: auto;
				border: 1px solid #e4e4e4;
			}
			
			.test3::after {
				content: "...";
				position: absolute;
				bottom: 0;
				right: 0;
				padding-left: 40px;
				background: -webkit-linear-gradient(left, transparent, #fff 55%);
				background: -o-linear-gradient(right, transparent, #fff 55%);
				background: -moz-linear-gradient(right, transparent, #fff 55%);
				background: linear-gradient(to right, transparent, #fff 55%);
			}
		</style>
	</head>

	<body>
		<div class="test1">
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
		</div>
		<div class="test2">
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
		</div>
		<div class="test3">
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
			ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试ceshi 测试
		</div>
	</body>

</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。