Source address: http://blog.csdn.net/fb_01/article/details/51345595
1. The ellipsis is often used when a single line of text exceeds. How to judge whether the text exceeds?
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
- <title>test</title>
- <styletype="text/css">
- #ellipsis{
- width: 100px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- </style>
- </head>
- <body>
- < div id = "ellipsis" > Today is your birthday, my country! ! ! </ div >
- <script>
- var clientWidth = document.getElementById("ellipsis").clientWidth;
- var scrollWidth = document.getElementById("ellipsis").scrollWidth;
- if(clientWidth<scrollWidth){
- alert("Omitted...");
- }
- </script>
- </body>
- </html>
2. Knowledge point expansion offsetwidth clientwidth scrollwidth
scrollWidth: The width of the actual content of the object, excluding the width of the border, will become larger as the content in the object exceeds the visible area.
clientWidth: The width of the visible area of the object content, excluding scroll bars and other edges, will change with the display size of the object.
offsetWidth: The actual width of the object as a whole, including the scroll bar and other edges, will change with the display size of the object.