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

阅读更多/阅读更少的纯JavaScript功能 - ReadMore.js
栏目分类:文本   发布日期:2021-08-18   浏览次数:

一个非常轻量级(约 2kb 缩小)和跨浏览器的 JavaScript 库,它按单词截断文本并显示/隐藏带有 Read More 和 Read Less 链接的文本块。

使用:

将 ReadMore.js 库的缩小版本导入网页。

<script src="src/readMoreJS.min.js"></script>

初始化 ReadMore 并指定目标文本包装器,如下所示:

$readMoreJS.init({
  target: 'p'
});

所有默认设置。

$readMoreJS.init({
 
  // 插件适用的元素的选择器(任何 CSS 选择器,例如:'#', '.')。
  target: '', 
 
  // 初始显示的单词数(任意数字)。 
  numOfWords: 50,     
 
  // 如果为 true,用户可以在“阅读更多”和“阅读更少”之间 切换 
  toggle: true,              
 
  // “阅读更多”链接的文本 
  moreLink: 'read more ...', 
 
  // '少读'链接的文本 
  lessLink: 'read less',      
 
  // 给读多链接的类 
  linkClass: 'rm-link',    
 
  // 给读多链接的div容器的类。
  containerClass: false
 
});


官方网站:https://github.com/georapbox/ReadMore.js

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