fewlines.js是一个小巧而强大的jQuery响应文本截断插件,它允许您根据指定的可见行数截断任何容器中的长文本。
1.加载最新的JQuery库后,插入主JavaScript JQuery.fewlines.min.js。
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/JQuery.fewlines.min.js"></script>
2.调用目标文本上的函数,并指定可见行数(默认值:2),如下所示:
<div id="demo" title="Reveal More Text"> ... </div>
$(document).ready(function(){ $('#demo').fewlines({ lines: 3 }); });
3.启用响应功能,这意味着插件将在调整窗口大小时自动重新截断文本。
$('#demo').fewlines({ lines: 3, responsive: true, });
4.确定是否隐藏“多读”和“少读”链接。
$('#demo').fewlines({ lines: 3, noAction: true, // default: false });
5.将鼠标悬停在省略号上时,确定是否显示隐藏的内容。默认值:false。
$('#demo').fewlines({ lines: 3, showOnMouseOver: true, });
6.覆盖“多读”和“少读”链接的默认文本。
$('#demo').fewlines({ lines: 3, closeMark: 'close', openMark: '...', });
7.确定是否在新行中添加“阅读更多”省略号。默认值:false。
$('#demo').fewlines({ lines: 3, newLine: true, });