解決Asp.net下GridView中顯示資料欄位文字過長的辦法
阿新 • • 發佈：2019-01-03
在網頁顯示時，經常遇到表格或Gridview，Datalist等中資料欄位太長的問題。基本辦法有兩種：1，換行顯示；2，先隱藏一部分，當滑鼠移動到其位置時，自動將全部內容的顯示出來。本文主要講述如何採用ToolTip實現第二種解決辦法。
其中第一種辦法，不建議採用，其原因：1，破壞整體佈局；2，如果內容是一個連串的單詞就不會自動換行，手動有會過於麻煩，經常考慮不周。
第二種的解決辦法，有多種具體的實現辦法：
一、使用GridView自帶ToolTip屬性。
在GridView中新增DataBound方法，併為需要的Cell設定ToolTip，再隱藏顯示欄位即可。
protectedvoid gvToolTip_DataBound( 二、寫段JavaScript程式碼，並在頁面上增加一ToolTip層
ToolTip顯示程式碼見附件，
頁面上需要作的工作是：
載入ToolTip顯示函式所在的檔案
<script language="javascript" type="text/javascript" src="tooltip.js" ></script>
初始化ToolTip
<body onload="javascript:initToolTips();">
增加一ToolTip層
<div id="toolTipLayer" style="position: absolute; visibility: hidden">
</div>
新增DataBound函式
protectedvoid gvToolTip_DataBound(object sender, EventArgs e)
{
// 演示ToolTip，使用外建的Javascript函式
gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOver", Convert2Tooltip(gvToolTip.Rows[0].Cells[3].Text));
gvToolTip.Rows[0].Cells[3].Attributes.Add("OnMouseOut", "javascript:toolTip();");
if (gvToolTip.Rows[0].Cells[3].Text.Length > 18)
gvToolTip.Rows[0].Cells[3].Text = gvToolTip.Rows[0].Cells[3].Text.Substring(0, 15) + "...";
} 其中Convert2Tooltip為處理字串函式，它將’轉為/’，否則無法顯示含’的欄位
三、兩種方法的比較
1. 方法一較簡單，而方法二需要額外的處理
2. 方法二的優點在於它能自定義寬度，前景背景顏色，且當滑鼠滑鼠移上去時立即顯示
當然還有一種最最簡單的辦法，就是利用網頁控制元件的style隱藏過長的文字：
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;