如何制作“阅读更多”按钮?

时间:2017-06-27 11:07:55

标签: javascript css button

我需要为此代码制作一个Read More按钮:
Read More只能在最大宽度为767px的情况下保持不变!

<div class="MsoNormal" style="padding-bottom: 15px"><h1 class="mobile-text-fix" style="font-size: 48px;!important; line-height: 120%!important;font-weight:300!important;margin:0px!important;letter-spacing:0px!important;">Lorem Impsum</h1></div>
<p class="MsoNormal"><span style="font-size: 12.0pt; line-height: 120%;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></p>

这里应该是阅读更多

<div class="MsoNormal" style="padding-bottom:15px;padding-top:50px;"><h2 class="mobile-text-fix" style="font-size: 48px;!important; line-height: 120%!important;font-weight:300!important;margin:0px!important;letter-spacing:0px!important;">Lorem Impsum</h2></div>
<p class="MsoNormal"><span style="font-size: 12.0pt; line-height: 120%;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></p>

1 个答案:

答案 0 :(得分:0)

使用CSS样式为overflow: hidden;的固定容器隐藏多余数据,然后在容器扩展时设置容器样式而不是固定,即height: auto; 示例:https://www.zabbix.com/documentation/3.2/manual/appendix/config/zabbix_server