css限制三行溢出显示省略号 展开
2020-11-10 本文已影响0人
每天进步一点点5454
-
默认显示三行 省略号 展开
image.png
-
收起
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1120px;
margin: 0 auto;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
span {
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
color: #175199;
width: 47px;
background-color: #Fff;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<span>...展开</span>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('span').on({
click: function () {
var txt = $(this).html();
if (txt == '...展开') {
$(this).html('收起').css('position', 'inherit');
$('div').css({
'-webkit-box-orient': 'inherit',
'height': 'auto'
})
} else {
$(this).html('...展开').css('position', 'absolute');
$('div').css({
'height': '60px',
'-webkit-box-orient': ' vertical'
})
}
}
})
</script>
</body>
</html>
第2版pc/h5都可使用，但是没有省略号，第1版有省略号
效果
-
展开
image.png
-
收起
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.xlrecord {
max-height: 60px;
display: inline-block;
font-size: 14px;
position: relative;
}
.xlrecordhide {
overflow: hidden;
}
.xlrecord .zk {
position: absolute;
bottom: 0;
cursor: pointer;
right: 0;
background-color: #ffffff;
padding-left:55px;
background: linear-gradient(to right, transparent, #fff 55%);
color: #666666;
}
</style>
</head>
<body>
<span class="xlrecord xlrecordhide">
近年来，随着互联网的迅猛发展，我国上网人数逐年递增，网络正在成为许多人生活中不可缺少的一部分。在形成了一种全新的虚拟空间的同时，也引发了网络空间在法律上属于空白的新问题，虚拟财产就是其中之一。由于种种原因，虚拟财产的纠纷层出不穷，引起了各方的广泛关注，而与虚拟财产有关的含义、性质以及如何保护等问题越来越成为人们关注和讨论的焦点。目前，虚拟财产主要包括网络游戏账号、装备和QQ号码、邮箱账号等。社会经济发展的现实迫切需要法律来认可虚拟财产的法律地位，确认其性质和保护方法。然而我国在法学理论界与司法实践界对待虚拟财产的看法未达成一致，相关的立法也明显落后，司法个案的处理结果更是大不相同。因此理清虚拟财产的法律属性并在此基础上构建对其的民法保护就显得十分急迫并具有现实意义了。
本文从虚财产入宪以后一个很现实、很重要的问题，因为这不仅关系到网络游戏玩家的利益，还关系到网络游戏的长远发展。游戏玩家和社会各方的共同努力才能真正促进虚拟财产的保护。保护网络游戏虚拟财产对实践宪法，促进国民经济的发展有重要意义。面对我国游戏产业的快速发展，立法机关应尽快对虚拟财产作出相关的界定，并尽快出台司法解释对其进行保护，待条件成熟时再立法。
<b class="zk">展开▼</b>
<b class="zkk" style="color:#666666;">收起▲</b>
</span>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.zk').on({
click:function() {
$('span').removeClass('xlrecordhide');
$('.zk').hide().siblings().show();
}
})
$('.zkk').click(function(){
$('span').addClass('xlrecordhide');
$('.zk').show().siblings().hide();
})
</script>
</body>
</html>
