用js实现“多行溢出隐藏”功能

cnTomato 发布于2019-08-22 18:42 / 1529人阅读

摘要：种实现思路定义行数，展现该行数以内的文字，隐藏超出行数的文字定义总内容的部分，展现该部分，隐藏超出该部分的文字实现方式模拟实现无构造去调用需要注意的是，对于文字内容，中务必设置文字的行高这个属性。

由于做移动端比较多，移动端对ellipsis这个css属性的支持还算不错，对-webkit-line-clamp的支持不一，特别是安卓机。
查了查资料，发现-webkit-line-clamp并不在css规范中。
那我们就尝试手动实现一个，对外暴露接口去调用。

2种实现思路:

定义行数，展现该行数以内的文字，隐藏超出行数的文字；

定义总内容的部分，展现该部分，隐藏超出该部分的文字；

实现方式:

模拟jQuery实现无new构造去调用

需要注意的是，对于文字内容，css中务必设置文字的"行高"这个属性。

//调用方式:k("#p").ellipsistoText(3), k("#p").ellipsistoLine(2), k("#p").restoretoLine(), k("#p").restoretoText()
(function () {
    var k = function (selector) {
        return new F(selector)
    }
    var F = function (selector) {
        this.ele = document.querySelector(selector);
        if (!this.ele.ori_height) {
            this.ele.ori_height = this.ele.offsetHeight; //用于保存原始高度
        }
        if (!this.ele.ori_html) {
            this.ele.ori_html = this.ele.innerHTML; //用于保存原始内容
        }
    }
    F.prototype = {
        init: function () {
            this.ele.style.height = this.ele.ori_height;
            this.ele.innerHTML = this.ele.ori_html;
        },
        ellipsistoLine: function (l) {
            this.init();
            this.ele.style.cssText = "overflow: hidden; height: " + parseInt(window.getComputedStyle(this.ele)["line-height"]) * l + "px";
        },
        ellipsistoText: function (t) {
            this.init();
            var len = (this.ele.ori_html).length * (1/t);
            this.ele.innerHTML = this.ele.ori_html.substr(0, len);
        },
        restore: function (){
            this.init()
        }
    }
    window.k = k;
})(window)

GPU云服务器云服务器用js实现连带功能用php实现聊天功能 JS留言功能实现 js怎么实现交互功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96121.html

css实现文本溢出隱藏

摘要：实现文本溢出显示省略号在做响应式网页的时候，我们要想在不同尺寸的设备下保证布局不会错乱，就需要对文字的长度进行限定。 css实现文本溢出显示省略号在做响应式网页的时候，我们要想在不同尺寸的设备下保证布局不会错乱，就需要对文字的长度进行限定。基础设置在介绍下面的方法之前，我们先对所有的例子进行基础的样式设置 /*基础设置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 评论0 收藏0
javascript模块化（二）--RequireJS初探

摘要：看完视频初步认识了一下，以及模块化开发的概念，在此做一下总结。所以应该将功能抽象成模块。并且非常耗性能解决办法，在滚动条正在运动或者已经到达目的地，就不应该执行动画。前言：在慕课网上跟着视频《侧边工具栏开发》做了一遍，用到了jquery操作DOM，其中，用requirejs管理模块依赖，然后自定义了两个模块它们都依赖jquery，并且其中一个自定义模块依赖另一个，所以要暴露出接口。看...

edgardeng 2019-08-21 10:54 评论0 收藏0