w3h5

jQuery.dotdotdot多行文本省略号插件的使用方法

最近在做一个自适应的网站,经常遇到需要文本的溢出地方,我写了一个CSS简单设置文本溢出的方法:用css实现文本溢出div显示省略号
但是IE只能设置单行溢出隐藏,Webkit内核浏览器才支持多行溢出,于是找到了这款插件,能够达到不错的效果,用Chrome自带的翻译加上自己的理解写了这么一个教程,希望能对大家有所帮助。

20160320232318_34665.jpg jQuery.dotdotdot多行文本省略号插件的使用方法 经验总结

什么是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>


赞 (3)
分享到: +More |

评论 沙发

换个身份