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,
});