如何判断text-overflow: ellipsis(是否溢出)（转帖）

最新推荐文章于 2024-06-24 13:32:02 发布

iteye_7649

最新推荐文章于 2024-06-24 13:32:02 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端之js 文章标签： text-overflow: ellipsis

本文链接：https://blog.youkuaiyun.com/iteye_7649/article/details/82677135

Web前端之js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种判断单行文本是否溢出并使用省略号的方法，并通过实例代码进行了展示。同时，文章还解释了scrollWidth、clientWidth及offsetWidth的区别及其应用场景。

源地址：http://blog.youkuaiyun.com/fb_01/article/details/51345595

1、单行文本超出经常使用省略号，如何判断文本是否超出？

[html]view plaincopy
      
    
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
<title>test</title>  
<style type="text/css">  
#ellipsis{  
    width: 100px;  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
}  
</style>  
</head>  
<body>  
    <div id="ellipsis">今天是你的生日，我的祖国！！！</div>  
    <script>  
        var clientWidth = document.getElementById("ellipsis").clientWidth;  
        var scrollWidth = document.getElementById("ellipsis").scrollWidth;  
        if(clientWidth<scrollWidth){  
            alert("已省略……");  
        }  
    </script>  
</body>  
</html>  