多行省略文本jQuery插件 fewlines.js

  • 源码大小:15.36KB
  • 所需积分:1积分
  • 源码编号:19JP-3324
  • 浏览次数:657次
  • 最后更新:2023年05月31日
  • 所属栏目:文本
本站默认解压密码:19jp.com 或 19jp_com

简介

fewlines.js是一个小巧而强大的jQuery响应文本截断插件,它允许您根据指定的可见行数截断任何容器中的长文本。

如何使用它:

1.加载最新的JQuery库后,插入主JavaScript JQuery.fewlines.min.js。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/JQuery.fewlines.min.js"></script>

2.调用目标文本上的函数,并指定可见行数(默认值:2),如下所示:

  1. <div id="demo" title="Reveal More Text">
  2. ...
  3. </div>
  1. $(document).ready(function(){
  2. $('#demo').fewlines({
  3. lines: 3
  4. });
  5. });

3.启用响应功能,这意味着插件将在调整窗口大小时自动重新截断文本。

  1. $('#demo').fewlines({
  2. lines: 3,
  3. responsive: true,
  4. });

4.确定是否隐藏“多读”和“少读”链接。

  1. $('#demo').fewlines({
  2. lines: 3,
  3. noAction: true, // default: false
  4. });

5.将鼠标悬停在省略号上时,确定是否显示隐藏的内容。默认值:false。

  1. $('#demo').fewlines({
  2. lines: 3,
  3. showOnMouseOver: true,
  4. });

6.覆盖“多读”和“少读”链接的默认文本。

  1. $('#demo').fewlines({
  2. lines: 3,
  3. closeMark: 'close',
  4. openMark: '...',
  5. });

7.确定是否在新行中添加“阅读更多”省略号。默认值:false。

  1. $('#demo').fewlines({
  2. lines: 3,
  3. newLine: true,
  4. });

预览截图