javascript - 如何让文字最多显示五行，并通过CSS或jquery完成折叠效果？

Question

大家好我遇到了一个问题，但是我的英文不是很好，但是我会尽量完整的表达出来。

问题是我有一个要求。设计稿的要求是文字最多显示五行文字。超过时，会出现一个按钮来展开更多文本！但是我的JS不是很熟悉，只有一点点。不知道单独使用CSS能不能达到这个效果？

如果你也知道js是怎么实现的，欢迎分享给我~先谢谢你的帮助，我真的不知道怎么做，谢谢。

.content {
  height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
}

.more {
  text-align: center;
}
.more a {
  text-decoration: none;
  color: #222;
}

<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>

标签： javascripthtmljquerycss

Answer 1

你可以使用 jQuery 来做到这一点，试试这个：

$('.show').click(function(){
  $(this).remove(); // remove more button
  $('.content').addClass('show-all'); // add class .show-all for .content when clicked on more button
});

.content {
  height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
}
.content.show-all{
  height:auto;
  overflow:visible;
  text-overflow: none
}
.more {
  text-align: center;
}
.more a {
  text-decoration: none;
  color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>