表格td內容過多時，td顯示省略號，鼠標移入顯示所有內容

時間  2019-11-16
標籤 表格 內容 過多 顯示 省略號 鼠標 移入 所有 简体版
原文   原文鏈接

兩種方式顯示：

1.title方式顯示：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>  
<style type="text/css">  
.tb{width:800px;font-size:12px;background:#6887D9}  
.tb thead th{height:25px;background:#217AC4;color:white}  
.tb tbody td{height:22px;background:white;padding-left:3px;}  
.autocut {  
    width:200px;  
    overflow:hidden;  
    white-space:nowrap;  
    text-overflow:ellipsis;  
    -o-text-overflow:ellipsis;  
    -icab-text-overflow: ellipsis;  
    -khtml-text-overflow: ellipsis;  
    -moz-text-overflow: ellipsis;  
    -webkit-text-overflow: ellipsis;  
}  
  
</style>  
</head>  
<body>  
 <table class="tb" border="0" cellpadding="1" cellspacing="1">  
    <thead>  
        <tr>  
            <th>Column1</th>  
            <th>Column2</th>  
            <th>Column3</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放鬆的方式方法對所發生的放鬆的方式的方式">放鬆的方式方法對所發生的放鬆的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放鬆的方式方法對所發生的放鬆的方式的方式">放鬆的方式方法對所發生的放鬆的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放鬆的方式方法對所發生的放鬆的方式的方式">放鬆的方式方法對所發生的放鬆的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
    </tbody>  
  </table>  
</body>  
</html>  
 
 
 
 

2.切換class屬性方式：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
.li1 {
list-style:none;
width:100px;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;
margin-top:5px; 
}
 
.li2{
list-style:none;
margin-top:5px;
}
</style>
<script type="text/javascript"  src="jquery-1.11.3.js"></script> 
</head>  
<body> 
<ul>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">web標準常見問題大全web標準常見問題大全</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">儘快瞭解瞭解可憐快捷連接裏看見快樂創建</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">和國際環境來看看窘境看見了開發機構瞭解了空間</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">發電股份的合格兩款發動機和旅客看了解了空間</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">發電股份的高科技了發動機來看發給你們了發動機來看</a></li>
</ul>
</body>
</html>javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程