[jQuery]超出容器部分...

思路:

　　1.获取容器的内部区域高度 eleH 

　　2.获取文字的内部区域高度 pEle 

　　3.循环判断 pEle 和 eleH的大小

　　　　当 pEle > EleH 的时候，将结尾的文字替换...

 

 

代码:

<div class="description">
    <span>测试</span>
</div>


/*****
*@paran:超出部分...
*@ele:容器
*@tag:文字标签
**/
ellipsis(".description","span");
function ellipsis(ele,tag){
    var ele = $(ele);
    var eleH = ele.innerHeight();
    var eTag = ele.children(tag);
    while(eTag.innerHeight() > eleH) {
        eTag.text(eTag.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
}

/****** 多个 ******/
  $(".description").each(function(){
　　var eleH = $(this).innerHeight();
　　var pEle =$(this).children("span");
　　while(pEle.innerHeight() > eleH) {
　　　　pEle.text(pEle.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
　　};
  })