css溢出文章隐藏并淡出效果

html文本溢出之后淡出效果

描述

纯css让文字溢出之后以淡出的效果隐藏。

效果如下:

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		.text {
			overflow: hidden;
			display: block;
			height: 109.2px;
			margin: 0 auto;
			font-size: 26px;
			line-height: 1.4;
			width: 400px;
			position: relative;
		}
		.text:after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 150px;
			height: 36.4px;
			background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffff 50%);
		}
	</style>
</head>
<body>
	<p class="text">
		我溢出之后会隐藏,并且还是淡出的效果,这会让你或者让你的用户看起来,非常的高级!
		我溢出之后会隐藏,并且还是淡出的效果,这会让你或者让你的用户看起来,非常的高级!
	</p>
</body>
</html>

人已赞赏
实用片段

渐变文字+鼠标悬停效果

2020-4-25 18:07:36

实用片段

css文本溢出隐藏并且以省略号显示

2020-4-27 12:24:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索