HTML怎麼讓table表格中的td單元格內容過長顯示為固定長度，多餘部分用省略號代替?

Roninwz發表於2017-09-21
HTML

直接上方法，不喜歡廢話。

[html] view plain copy
  1. <th class="wrap">商品名</th>  
  2. <td class="wrap">商品名</td>  

在要控制寬度的td和th加上以下樣式：

td裡面的內容放在div裡面，在div身上也加上這個樣式,如果想要滑鼠滑過時顯示全文字，可以給div加上title屬性： 


[css] view plain copy
  1. .wrap{  
  2. width: 150px; //設定需要固定的寬度  
  3. white-space: nowrap; //不換行  
  4. text-overflow: ellipsis; //超出部分用....代替  
  5. overflow: hidden; //超出隱藏  
  6. }  


[html] view plain copy
  1. <td>  
  2. <div class="wrap" title="<{$row[ 'productname']}>"><{$row[ 'productname']}></div>  
  3. </td>  


看看商品名的效果，如果需要滑鼠移動過去的時候顯示全部文字，也很簡單，給title賦值就可以了，利用html的屬性，是最好的解決辦法，如果有更好的辦法，可以告訴我哦！


下面是實際效果圖：為了這張圖，著實不易，一截圖滑鼠離開了字就沒了，用相機拍的，珍惜吧，騷年！右鍵》在新視窗中開啟

實際效果圖


轉載來自：http://blog.csdn.net/zhezhebie/article/details/54891844

相關文章