多行文本截断

/*
* 文字截取
* create by:river
* create date : 2014/08/15
* 文字截取两种方式截取,按字数,按行数
* 分别通过相应自定义属性
* data-textflow-words 字数
* data-textflow-rows  行数
*/
Ymt.add(function (require, exports, module) {
    var defOpts = {
        defSel: ‘.textflow‘,//默认选择
        rowNum:3,
        ellipsis:"..."//超出替换符号
    }
    /*
    * 字数截取
    * @param {objcet} 截取对象
    * @param {number} 行数
    */
    function wordsIntercept($target, wordsNum) {
        $target.each(function () {

        })
    }
    /*
    *行高截取
    * @param {objcet} 截取对象
    * @param {number} 行数
    */
    function RowIntercept($target,rowNum) {
        $target.each(function () {
            var $this = $(this),
                clientHeight = this.clientHeight,//容器高度
                fontSize = parseFloat($this.css("fontSize")),
                lineHeight = parseFloat($this.css("lineHeight"));
            var title = $this.attr("title");
            //将原来的值保存到title中
            if (title === undefined || title === "") {
                $this.attr("title", title = $this.text());
            }
            //将原来的值还原重新计算
            $this.text(title);

            var dheight = parseInt(rowNum * lineHeight);
            if (clientHeight >= dheight) {
                while (dheight * 3 < this.clientHeight) {
                    $this.text(title.substring(0, title.length / 2));
                    title = $this.text();
                }
                //减去末尾文字
                while (dheight < this.clientHeight) {
                    title = $this.text();
                    $this.text(title.replace(/(\s)*([a-zA-Z0-9]?|\W)(\.\.\.)?$/, "..."));
                }
            }
        })
    }
    /**
    * @param {string} 选择器
    * @param {string} 子选择器
    *   子选择器的目的,在父元素定义自定义属性,所有子选择应用这个选项,就不需要每个标签都去定义截取方式。
    * @param {object} 配置项
    */
    return function (selector, childer, opts) {
        var $target, num, $childer;
        opts = opts || defOpts;
        //如果没有传入使用默认
        if (!arguments.length || typeof arguments[0] !== "string") {
            $childer = $target = $(".textflow");
        } else {
            $childer = $target = $(selector);
        }
        //判断是否有配置项
        if (opts === "objcet") {
            opts = $m.merge(defOpts, opts);
        }
        //判断是否有子项
        if (typeof arguments[1] === "string") {
            $childer = $target.find(childer);
        }
        //按行截取大于按字数截取
        if (num = $target.attr("data-textflow-rows") || opts.rowNum) {
            RowIntercept($childer, num);
            return;
        }
        if (num = $target.attr("data-textflow-words")) {
            wordsIntercept($childer, num);
        }

    }
})
时间: 2024-10-10 17:48:53

多行文本截断的相关文章

css实现单行、多行文本超出显示省略号

前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 } 语法:text-overflo

Flipboard web移动端-打造每秒60帧的流畅体验

在智能手机和平板电脑的黎明时期, Flipboard 推出“移动先行”的体验,使我们可以重新思考页面中内容布局的原则,以及与触摸屏相关的,如何获得更好的用户体验的因素. 为了建立完整的体验,我们将 Flipboard 带到 web 端.我们在 Flipboard 所做的,在每台用户使用的设备上都拥有独立的价值:整理那些来自你最关心的主题,来源以及人的最好的故事.因此把我们的服务带到web端,也是一个合乎逻辑的延伸. 当我们开始这个项目后,认识到我们需要把源自移动体验的思考搬到 web 端,试图提

你不知道的css高级应用三种方法——实现多行省略

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w

h5css样式

兼容性前缀: 谷歌:webkit 火狐:moz ie:ms 欧鹏:o选择器: 属性选择器: * = 包含 {href * = 'www'} ^ = 以什么开头 $ = 以什么结尾 伪类选择器: 第一个:first-of-type 最后一个:last-of-type 第几个:nth-of-type() 选中前n个:nth-of-type(-n) 选中后5个:nth-of-type(n + 5) 第4个到第8个::nth-of-type(-n + 8):nth-of-type(n + 4) 奇数个:

设置Div多行文本超出时,以省略号代替

这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shcool截的图: 但是 text-overflow 有一个缺陷,它只能对单行文本起效果,如果是多行文本就不好使了. 如果想对多行文本也实现以省略号代替超出部分的话,可以使用下面方法(貌似局限于webkit内核): max-height:100px; /*首先设置div高度*/ overflow:hidd

用CSS截断字符串的两种实用方法

方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: 复制代码 代码如下: <i

sql server 导入平面文件源数据,错误 0xc02020a1错误 0xc020902a 错误 0xc02020c5,返回状态值 4 和状态文本“文本被截断,或者一个或多个字符在目标代码页...

使用sql server 导入平面文件源数据时,报错:错误 0xc02020a1: 错误 0xc020902a: 错误 0xc02020c5:错误 0xc0047022: 返回状态值 4 和状态文本"文本被截断,或者一个或多个字符在目标代码页中没有匹配项. 错误 0xc02020a1: 数据流任务 1: 数据转换失败.列"列 6"的数据转换返回状态值 4 和状态文本"文本被截断,或者一个或多个字符在目标代码页中没有匹配项.". (SQL Server 导入

《Python CookBook2》 第一章 文本 - 改变多行文本字符串的缩进 &amp;&amp; 扩展和压缩制表符(此节内容待定)

改变多行文本字符串的缩进 任务: 有个包含多行文本的字符串,需要创建该字符串的一个拷贝.并在每行行首添加或者删除一些空格,以保证每行的缩进都是指定数目的空格数. 解决方案: # -*- coding: UTF-8 -*- ''' Created on 2014年8月29日 path:E:\Se\core_python\[email protected]: Administrator function: 改变多行文本字符串的缩进 ''' def reindent(s,numSpaces): lea

IOS 自定义UIBUTTON 直接拖个xib 就能在button上显示多行文本 并且添加了点击的效果

拖个button继承一下  几行代码 就搞定 自用效果还行 IOS 自定义UIBUTTON 直接拖个xib 就能在button上显示多行文本 并且添加了点击的效果,布布扣,bubuko.com