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

最新推荐文章于 2025-06-27 16:08:10 发布

原创最新推荐文章于 2025-06-27 16:08:10 发布 · 4.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#text-overflow: ellipsis

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>  