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

最新推荐文章于 2021-06-01 11:13:51 发布

weixin_30326515

最新推荐文章于 2021-06-01 11:13:51 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SoYang/p/11183393.html

该博客介绍了一段JavaScript代码的实现思路。先获取容器内部区域高度和文字内部区域高度，再循环判断两者大小，当文字高度大于容器高度时，将结尾文字替换为'...'。代码转载自相关博客。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路:

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

转载于:https://www.cnblogs.com/SoYang/p/11183393.html