您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Layer.js怎么實(shí)現(xiàn)表格溢出內(nèi)容省略號(hào)顯示懸停顯示全部的方法,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格內(nèi)容溢出省略號(hào)顯示</title> <style type="text/css"> .contain { font-family: ‘ Microsoft YaHei '; margin: 15px auto; width: 900px; } table { border: 1px solid #e3e6e8; border-collapse: collapse; display: table; table-layout: fixed; text-align: center; width: 100%; } th, td { border: 1px solid #e3e6e8; height: 38px; line-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } th { background-color: #189AD6; color: #fff; } .layui-layer { word-break: break-all; word-wrap: break-word; } </style> <!--relate to this page javascript--> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script> </head> <body> <div class="contain"> <table> <thead> <th>貨幣</th> <th>本周收盤</th> <th>上周收盤</th> <th>漲跌</th> <th>幅度</th> </thead> <tbody> <tr> <td>EURGBP“EUR/GBP settled above 0.90 on Friday as the bounce in EUR/USD helped the lift the pair further into the 0.90 territory”.</td> <td>0.86333333333393222222</td> <td>0.88945555555555555553</td> <td>-203333333333333333111</td> <td>-2.3166%</td> </tr> <tr> <td>EURGBP</td> <td>0.8693</td> <td>0.8894</td> <td>-201</td> <td>-2.31%</td> </tr> <tr> <td>EURGBP</td> <td>0.8693</td> <td>0.8894</td> <td>-201</td> <td>-2.31%</td> </tr> </tbody> </table> </div> <script type="text/javascript"> $(function() { $("td").on("mouseenter", function() { //js主要利用offsetWidth和scrollWidth判斷是否溢出。 //在這里scrollWidth是包含內(nèi)容的完全高度,offsetWidth是當(dāng)前表格單元格的寬度。 if (this.offsetWidth < this.scrollWidth) { var that = this; var text = $(this).text(); window.layer.tips(text, that, { tips: 1, time: 2000 }); } }); }) </script> </body> </html>
效果如圖:
關(guān)于“Layer.js怎么實(shí)現(xiàn)表格溢出內(nèi)容省略號(hào)顯示懸停顯示全部的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。