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

最新推荐文章于 2024-08-22 11:20:46 发布

iteye_7649

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量4.2k

点赞数 1

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

本文链接：https://blog.csdn.net/iteye_7649/article/details/82677135

版权

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

10 篇文章 0 订阅

订阅专栏

源地址：http://blog.csdn.net/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>  