当前位置:主页 > JavsScript库 > 文本 >

使用阅读更多/更少按钮折叠长文本块 - read-more-btn-v2.js
栏目分类:文本   发布日期:2021-09-03   浏览次数:

一个轻量级、不显眼的 JavaScript 库,用于折叠和展开带有“阅读更多”和“阅读更少”按钮的长文本块。

使用:

1.read-more-btn-v2.js在页面中添加主脚本。

<script src="scripts/read-more-btn-v2.js"></script>

2. 将函数 mkBtn 附加到文本块并确定要保留的字符数。

<main>
  <article>
    <p>
      In a village of La Mancha, in Spain, there once lived one of those gentlemen who usually keep a lance upon a
      rack, an old target, a lean horse, and a greyhound for coursing. A dish of boiled meat, consist-ing of somewhat
      more beef than mutton, the fragments served up cold on most nights, lentils on Fridays, bread and pull-it on
      Saturdays, with a small pigeon by way of addition on Sundays,consumed three fouiths of his income. The rest was
      laid out in a surtout of fine black cloth, a pair of velvet breeches for holidays, with slippers of the same;
      and on week-days he prided himself on the very best of his own homespun doth. </p>
    <p>His family consisted of a housekeeper, somewhat above forty, a niece not quite twenty, and a lad for the field
      and the market, who both saddled the horse and handled the pruning-hook. The age of our gentleman bordered upon
      fifty years. He was of a robust constitution, spare-bodied, of a meagre visage; a very early riser, and a keen
      sportsman.
    </p>
  </article>
</main>
mkBtn('article', 30);


官方网站:https://github.com/gumbol/read-more-btn

相关热词: 文本截断

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库