首页 > 代码库 > js实现多行省略

js实现多行省略

2024-09-03 01:06:41   219人阅读

虽然ie9逐步淘汰淘汰了，但是……为了兼容ie8的多行省略功能，jq插件ell

jQuery.fn.ell = function(count) {
    for(var i = 0 ; i < $(this).length; i ++){
        var ele = $(this).eq(i);
        //words的width和height
        var W = ele.width();
        var H = ele.height();
        //get element‘s children p
        var p = ele.find(‘p‘);
        //get element‘s lineheight
        var lineHeight = parseFloat(ele.css(‘line-height‘) || ele.find(p).css(‘line-height‘));
        if(count == 1) {
            ele.find(p).css({
                ‘width‘: W,
                ‘text-overflow‘:‘ellipsis‘,
                ‘white-space‘:‘nowrap‘,
                ‘overflow‘:‘hidden‘
            })
        } else if (count >1) {
            var divH = lineHeight*count;
            if(H != ‘auto‘){
                ele.css({
                    ‘height‘: divH
                });
            }
            //如果最的p的高度大于divH，那么删除末尾多余行数的str
            ele.each(function(i){
                while (p.outerHeight() > divH) {
                    p.text(p.text().replace(/(\s)*(\w+|\W)(\.\.\.)?$/, "..."));
                };
            })
        }
    }
};

html、css和调用的js如下:

<style>
.words {
	border: 1px solid #ddd; margin-bottom: 20px;
	/*以下三个属性必须有*/
	width: 300px;
	overflow: hidden;
	line-height: 25px;
	/*以上三个属性必须有*/
}
</style>
<script src="http://www.mamicode.com/jquery.js"></script>
<script src="http://www.mamicode.com/ell.js"></script>
<script> $(function(){ $(‘.words‘).ell(2); }) </script>


<body>
<div class="words">
	<p>我是超长文本标记语言我是超长文本标记语言我是超是超长文本标记语言我是超长文本标记语言</p>
</div>
<div class="words">
	<p>dsfasdsf asdsf asdsfas</p>
</div>
<div class="words">
	<p>是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超是超长文本标记语言我是超</p>
</div>

效果：

技术分享

 

js实现多行省略


联系
我们