js和css实现内容超过边框，就自动省略，自动添加title
在项目汇总，我们有这样的需求，如果内容多了，就自动省略，自动添加title
这个需要判断判断俩个值，一个是width（），一个是scrollWidth，
在div中，如果内容没有超过边框，这俩个值是一样的，就是css设置的宽度；如果内容超过边框了，scrollWidth的值会大于width，所以我们可以通过判断scrollWidth和width的值
来知道内容是否超过边框
例：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <script type="text/javascript" src="../jquery-3.1.1.js"></script> 9 <style> 10 .test1{ 11 width: 200px; 12 height: 20px; 13 overflow: hidden; 14 text-overflow: ellipsis; 15 white-space: nowrap; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <div class="test1">阿尔瓦尔</div> 22 <div class="test1">阿尔瓦尔方式顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多</div> 23 </div> 24 <script> 25 $(function () { 26 console.log($(".test1").eq(1).width()) 27 console.log($(".test1").eq(1)[0].scrollWidth) 28 for(var i = 0;i<$(".test1").length;i++){ 29 if($(".test1").eq(i).width() < $(".test1").eq(i)[0].scrollWidth){ 30 $(".test1").eq(i).attr("title",$(".test1").eq(i).text()) 31 } 32 } 33 }) 34 </script> 35 </body> 36 </html>
在table中，就不能这样判断了，就算内容没有超过边框，scrollWidth也会大于width，所以我们只用scrollWidth就行，先通过计算获取内容少时scrollWidth的值，然后同判断
如果当前的scrollWidth大于之前计算的值，就说明内容超过边框了
例：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <script type="text/javascript" src="../jquery-3.1.1.js"></script> 9 <style> 10 table{ 11 width: 1080px; 12 table-layout: fixed; 13 border-collapse: collapse; 14 margin: 0 auto; 15 } 16 thead{ 17 width: auto; 18 font-size: 14px; 19 text-align: center; 20 background-color: #777777; 21 } 22 thead tr,thead th{ 23 border: 1px solid #dddddd; 24 border-left: none !important; 25 color: #ffffff; 26 height: 50px; 27 font-size: 14px; 28 } 29 thead tr img,tbody td img{ 30 width: 14px; 31 height: 14px; 32 cursor: pointer; 33 } 34 35 tbody{ 36 width: auto; 37 min-width: 1070px; 38 font-size: 14px; 39 text-align: center; 40 border-bottom: 1px solid #dddddd; 41 background-color: #ffffff; 42 } 43 tbody tr,tbody td{ 44 border-left: 1px solid #dddddd; 45 border-right: 1px solid #dddddd; 46 height: 67px; 47 color: #464646; 48 } 49 tbody td{ 50 overflow: hidden; 51 text-overflow: ellipsis; 52 white-space: nowrap; 53 } 54 </style> 55 </head> 56 <body> 57 <table> 58 <tbody> 59 <tr> 60 <td class="test2">我是</td> 61 <td class="test1" width="350">我是1反倒</td> 62 <td>我是2</td> 63 </tr> 64 <tr> 65 <td>我是</td> 66 <td class="test1" width="350">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td> 67 <td>我是2</td> 68 </tr> 69 <tr> 70 <td>我是</td> 71 <td class="test1" width="350">我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所我是1反倒是所所所所所所所所所所所所所所所所所所所所</td> 72 <td>我是2</td> 73 </tr> 74 </tbody> 75 </table> 76 <script> 77 $(function () { 78 // 352是最开始算出来的，当内容很少时，scrollWidth值是352 79 for(var i = 0;i<$(".test1").length;i++){ 80 if($(".test1").eq(i)[0].scrollWidth > 352){ 81 $(".test1").eq(i).attr("title",$(".test1").eq(i).text()) 82 } 83 } 84 }) 85 </script> 86 </body> 87 </html>
