[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)(\.\.\.)?$/, "..."));
  };
  })

  

猜你喜欢

转载自www.cnblogs.com/SoYang/p/11183393.html
今日推荐