源地址:http://blog.csdn.net/fb_01/article/details/51345595
1、单行文本超出经常使用省略号,如何判断文本是否超出?
- <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>
2、知识点拓展之offsetwidth clientwidth scrollwidth
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。