jQuery.dotdotdot多行文本省略号插件的使用方法
最近在做一个自适应的网站，经常遇到需要文本的溢出地方，我写了一个CSS简单设置文本溢出的方法：用css实现文本溢出div显示省略号
但是IE只能设置单行溢出隐藏，Webkit内核浏览器才支持多行溢出，于是找到了这款插件，能够达到不错的效果，用Chrome自带的翻译加上自己的理解写了这么一个教程，希望能对大家有所帮助。
什么是dotdotdot
Dotdotdot是一款截断网页多行内容的jQuery插件，当前文本超出范围自动显示省略号。
该插件可以在省略号之后，内容的结尾处添加“More/更多”锚点。
插件会自动识别大多数元素的显示方式，调整浏览器大小，省略号会即时更新。
插件的下载和安装
插件官网：http://dotdotdot.frebsite.nl 可以在官网直接下载js文件。
通过bower安装：
bower install jQuery.dotdotdot通过Git安装：
git clone https://github.com/FrDH/jQuery.dotdotdot如何使用插件
首先，在页面中引入 nessesary .js 文件（需要jquery支持）。代码如下：
<script src ="jquery.js"></script>
<script src ="jquery.dotdotdot.js"></script>然后，在需要省略的元素上添加监听事件。
<script>
$(function () {
$("#wrapper").dotdotdot({
wrap: 'letter'//这里中文要用letter
});
})
</script>该插件还包含很多选项，可以在对象中设置：英语不好可能翻译的有点渣
$(function () {
$("#wrapper").dotdotdot({
callback: function( isTruncated ) {},
/* 截断文本后调用的函数
在这个函数里，“this”是指该元素 */
ellipsis: "\u2026 ",
/* 添加的文本为省略号 */
height: null,
/* 元素的（最大）高度:
null: 判断CSS (max-)的高度;
number: 设置一个固定的高度;
"watch": 重新判断“watch”中的CSS (max-)的高度; */
keep: null,
/* jQuery选择器的元素保存在省略号之后. */
tolerance: 0,
/* 判断元素高度的偏差. */
truncate: "word",
/* 如何截断文本: 根据 "node"/节点, "word"/单词 或者 "letter"/字母. */
watch: "window",
/* 是否更新省略号:
true: 监测元素的宽度和高度;
"window": 检测窗口的宽度和高度. */
});
});在插件被激发之后，通过存储在“dotdotdot”数据属性中的API可以获得一系列的方法：
$(function () {
var API = $("#wrapper").dotdotdot({
// 这里填写选项
}).data( "dotdotdot" );
API.getInstance();
/* 返回Class实例。 */
API.truncate();
/* 开始截断过程。 */
API.restore();
/* 恢复原始内容。 */
API.destroy();
/* 完全恢复元素到它的pre-init状态。 */
API.watch();
/* 开始监视包装器或窗口的宽度和高度。 */
API.unwatch();
/* 停止监视包装器或窗口的宽度和高度。 */
})简单的页面演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery.dotdotdot</title>
<script src ="jquery.js"></script>
<script src ="jquery.dotdotdot.js"></script>
</head>
<body>
<div id="wrapper" style="width: 100%;height: 40px;border: 1px solid #F00;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dolorem fuga harum inventore ipsam laboriosam maxime modi, natus odio officiis possimus quae quibusdam quos reiciendis rem repellendus rerum suscipit voluptatem.
</div>
<script>
$(function () {
$("#wrapper").dotdotdot({
wrap: 'letter'//这里中文要用letter
});
})
</script>
</body>
</html> (adsbygoogle = window.adsbygoogle || []).push({});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-22)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读