如何实现Play商店描述等内容

Question

Play商店（在众多其他网站中）不完整地显示商品的描述，而是显示其中的一部分，并隐藏其余部分。

您可以点击＆＃34;阅读更多＆＃34;为了阅读其余的描述，其中（按钮）将扩展描述部分。

事情是：它显示文本的其余部分就像你在这里看到的那样褪色：

  

https://play.google.com/store/apps/details?id=com.skype.raider&hl=en

请注意文字＆＃34; 以碰到你知道的事情。＆＃34;

Answer 1

如果您在开发人员工具中进入inspect element模式，您会注意到它是一个绝对定位的元素，渐变背景会转换为透明。通过定义描述的设置高度，并隐藏溢出，我们可以添加酷炫的文本＆＃39;对元素的影响。之后，它只是一个简单的类切换来隐藏效果并将文本的高度设置为100％。

以下示例！

＆＃13;

＆＃13;

$(function() {
  $('.read').click(function() {
    $('.text').toggleClass('expanded');
  });
});

＆＃13;

.text {
  height: 75px;
  overflow-y: hidden;
  position: relative;
}
.text.expanded {
  height: 100%;
}
.text.expanded .top {
  display: none;
}
.top {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 245, 245, 0)), color-stop(100%, #F5F5F5));
  background-image: -webkit-linear-gradient(top, rgba(245, 245, 245, 0), #F5F5F5);
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #F5F5F5);
  bottom: 0;
  cursor: pointer;
  height: 30px;
  left: 0;
  position: absolute;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <div class="top"></div>
</div>
<a href="javscript:void(0);" class="read">Read More</a>

＆＃13;

＆＃13;

＆＃13;