文本內容超長顯示省略號，鼠標移上自動顯示全部內容（適用於EasyUI DataGrid）

在日常處理表格時，經常會遇到按正常列寬無法全部顯示的超長文本，有時候客戶會要求顯示成省略號，鼠標移上才顯示全部文本。

本文主要是以EasyUI的DataGrid為案例，介紹省略號的解決方案，其他場景只要能將文本用DIV包裹住，應該都能使用。

首先在JS中定義一個fomatter函數，將單元格的文本用div包裹住，然后在EasyUI DataGrid的列定義中使用該fomatter函數。

    /**
    * 將單元格用DIV包裹住,指定class,同時將文本賦值給title屬性,這樣鼠標移上就能顯示全部文本.
    */
    function formatterEllipsis(value, row, index){
        if(value){
            return "<div title='" + value + "' class='textEllipsis'>"+value+"</div>";
        }else{
            return '';
        }
    }

<th data-options="field:'pitemName',width:350,align:'left',formatter : formatterEllipsis">需要顯示省略號的列</th>

然后在樣式中定義一個class，超長自動顯示省略號：

    /* 文本超長自動顯示省略號 */
    .textEllipsis{
        overflow: hidden;/*不允許滾動條*/
        white-space: nowrap;/*不允許文本換行*/
        text-overflow: ellipsis;/*文本超長顯示省略號*/
    }

此時文本超長已經可以顯示省略號了，且鼠標移上之后會自動顯示全部文本。(但用戶不發選中和復制文本)

如下還有一個樣式，就是當鼠標移上之后，通過改變行高顯示全部文本的，用戶可以選中和復制。大家可以根據實際需求自行選擇加還是不加。

    /* 鼠標移上，改變行高，顯示全文class */
    .textEllipsis:hover {
        height: auto; 
        word-break:break-all; 
        white-space: pre-wrap;  
        text-decoration: none;
    }

該方案有個缺點，就是如果你已經對單元格或者行加了樣式，將文本放入div內，可能會破壞原有的樣式，請大家使用時注意調整！