table標籤裏td內容的超出/隱藏/鼠標懸停顯示

前言：有時候就是會碰到這種要求，非要在列表上就顯示那種字段內容很多的列，不放到詳情頁面

1、table中的td內容超出隱藏

<table style="table-layout: fixed;width: XXX px">
    <tr>
          <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" ></td>
    </tr>
</table>

table標籤需要設定屬性 table-layout: fixed;width:XXXpx;
在要超出隱藏的td標籤上設定屬性  white-space: nowrap;text-overflow: ellipsis;overflow: hidden; 
不要忘了給table加個寬度 

2、table中的td超出內容隱藏，鼠標懸停顯示內容

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;
            }

<div class="MHover">內容數據</div>
<div class="MALL">內容數據</div>

$(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();
            });
        });

        主要需要調試的地方是是偏移量

3、css實現div（塊級元素）內顯示兩行或者三行，超出部分用省略號顯示

 一行省略寫法：
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

多行省略寫法：
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;（行數）
    -webkit-box-orient: vertical;
	
-webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性 ，將對象作爲彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow，可以用來多行文本的情況下，用省略號“...”隱藏超出範圍的文本