做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

table中td超出內容隱藏，鼠標懸停全部顯示(完整版，含js代碼)

2021-8-10    前端達人

一、CSS語法：
text-overflow：clip | ellipsis
默認值：clip
適用于：所有元素
clip： 當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。
ellipsis： 當對象內文本溢出時顯示省略標記（...）。
在使用的時候，有時候發現不會出現省略標記效果，經過測試發現，使用ellipsis的時候，必須配合overflow:hidden; white-space:nowrap; width:50%;這三個樣式共同使用才會有效果
 
實例：
復制代碼 
table { width: 100%; float: left; table-layout:fixed; width:500px; border:1px solid #ccc;
        } table tr { line-height: 25px; border:1px solid #ccc;
            } table td { border:1px solid #ccc; text-align:center;
            } .MHover{ border:1px solid #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
            }
復制代碼
二、HTML代碼
復制代碼 
<table> <tr> <th>姓名</th> <th>個性簽名</th> <th>性別</th> </tr> <tr> <td>張國榮</td> <td> <div class="MHover">我就是我，是顏色不一樣的煙火！</div> <div class="MALL">我就是我，是顏色不一樣的煙火！</div> </td> <td>男</td> </tr> </table>
復制代碼
注：class="MHover"為表格里顯示的內容，內容長度超多指定寬度時隱藏多余字段，并在后面加...
class="MALL"為鼠標懸停顯示的內容。
三、js代碼
復制代碼 
$(document).ready(function () {
            $(".MALL").hide();
            $(".MHover").mouseover(function (e) {
                $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
            });
            $(".MHover").mousemove(function (e) {
                $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });
            });
            $(".MHover").mouseout(function () {
                $(this).next(".MALL").hide();
            });
        });
復制代碼
注：class="MHover"為表格里顯示的內容，內容長度超多指定寬度時隱藏多余字段，并在后面加...
class="MALL"為鼠標懸停顯示的內容。


藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 


日歷

鏈接

個人資料

藍藍設計的小編 http://m.91whvog3.cn

存檔