专栏首页前端资源jQuery.dotdotdot多行文本省略号插件的使用方法

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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • sessionStorage和localStorage的语法使用,区别和联系

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不...

    德顺
  • 利用纯CSS实现手机下拉菜单效果

    其实用纯 CSS 就能实现,利用 checkbox 的 checked 属性,设置菜单的显示隐藏。

    德顺
  • CSS遮罩应用:带有不规则三角的气泡

    左边部分的矩形比较好实现,通过设置宽高可圆角就可以,但是右边的不规则三角不好用代码实现了。

    德顺
  • RESTful架构REST名称REST的出处RESTful API各端的具体实现

    JavaEdge
  • Maven依赖管理大全

    大家都知道随着业务的进展,项目会变得越来越多,这个时候如果没有一个统一的依赖管理中心,就会有很多问题发生。

    用户1149268
  • RESTful API 最佳实践

    本文是我在学习 REST API tutorial(中译版) 在线教程过程中,绘制的思维导图笔记。笔记在原教程的基础上扩充了相关知识点的资料和教程,方便查阅和知...

    柳公子
  • 使用了 Service Mesh 后我还需要 API 网关吗?

    如文章标题所示,本文通过对 Service Mesh 技术和 API 网关的对比,着重分析了两者的功能重合点和分歧点,解答了开发者的困惑,为如何进行技术选型和落...

    CNCF
  • TensorFlow 深度学习笔记 逻辑回归 实践篇

    Practical Aspects of Learning Install Ipython NoteBook 可以参考这个教程 可以直接安装anaconda,里...

    梦里茶
  • 机器人马上打Call:谷歌Assistant持续对话功能接近应用

    新智元
  • 趁假期修炼内功,教你顺滑切换编程语言

    喜大普奔的黄金周就要到了,各位程序员们是不是已经买好了回家的票?如果没什么重要的安排,不如也趁此假期,修炼几招内功心法。

    HyperAI超神经

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动